Metoden addColorStop() Canvas
Pentafsiran dan penggunaan
addColorStop() Metod menentukan warna dan posisi dalam objek gradient.
Metod addColorStop() dengan createLinearGradient() atau createRadialGradient() Gunakan bersama-sama.
Komen:Anda boleh panggil metod addColorStop() beberapa kali untuk mengubah penampakan graden. Jika anda tidak gunakan metod ini kepada objek gradient, graden akan tak kelihatan. Untuk mendapatkan graden yang kelihatan, anda perlu mencipta sekurang-kurangnya satu tanda warna.
Contoh
Contoh 1
Tentukan graden daripada hitam ke putih sebagai corak pengisi persegi.
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);
Petikan:Banyak lagi contoh yang disediakan di bawah halaman.
Sintaks
gradient.addColorStop(hentian,warna);
Nilai parameter
| Parameter | Deskripsi |
|---|---|
| hentian | Nilai di antara 0.0 dan 1.0, menunjukkan posisi awal dan akhir dalam graden. |
| warna | Nilai warna CSS yang dipaparkan di tempat akhir. |
Banyak lagi contoh
Contoh 2
Dengan menggunakan beberapa metod addColorStop() untuk tentukan penampakan graden:
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 jambu");
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);
Pemungutan sokongan pereka
Nombor di dalam tabel menunjukkan versi pereka penuh yang mendukung ciri ini.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Komen:Internet Explorer 8 dan versi sebelumnya tidak mendukung elemen <canvas>.
