Metode addColorStop() Canvas
Definisi dan penggunaan
addColorStop() Aturan metode menentukan warna dan posisi dalam objek gradient.
metode addColorStop() digunakan dengan createLinearGradient() atau createRadialGradient() Gunakan bersamaan.
Keterangan:Anda dapat memanggil metode addColorStop() beberapa kali untuk mengubah penampang. Jika Anda tidak menggunakan metode ini untuk objek gradient, penampang akan tak terlihat. Untuk mendapatkan penampang yang terlihat, Anda perlu menciptakan setidaknya satu titik warna.
Contoh
Contoh 1
Definiskan penampang dari hitam ke putih sebagai gaya pengisi lingkaran:
JavaScript:
var c=document.getElementById('myCanvas');
var ctx=c.getContext('2d');
var grd=ctx.createLinearGradient(0,0,170,0);
grd.addColorStop(0,"hitam");
grd.addColorStop(1,"putih");
ctx.fillStyle=grd;
ctx.fillRect(20,20,150,100);
Petunjuk:Lebih banyak contoh disediakan di dasar halaman.
Sintaks
gradient.addColorStop(stop,warna);
Nilai parameter
| Parameter | Deskripsi |
|---|---|
| stop | Nilai antara 0.0 dan 1.0, yang menunjukkan posisi mulai dan akhir dalam penampang. |
| warna | Nilai warna CSS yang ditampilkan di posisi akhir. |
Beberapa contoh lain
Contoh 2
Dengan cara menggunakan berbagai metode addColorStop() untuk mendefinisikan penampang:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var grd=ctx.createLinearGradient(0,0,170,0);
grd.addColorStop(0,"hitam");
grd.addColorStop("0.3","merah muda");
grd.addColorStop("0.5","biru");
grd.addColorStop("0.6","hijau");
grd.addColorStop("0.8","kuning");
grd.addColorStop(1,"merah");
ctx.fillStyle=grd;
ctx.fillRect(20,20,150,100);
Dukungan peramban
Angka di tabel menunjukkan versi peramban pertama yang sepenuhnya mendukung atribut ini.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Keterangan:Internet Explorer 8 dan versi sebelumnya tidak mendukung elemen <canvas>.
