Contoh
Tentukan gradien yang berlangsung dari hitam ke putih, sebagai gaya mengisi untuk persegi panjang:
JavaScript:
var c=document.getElementById('myCanvas');
var ctx=c.getContext('2d');
var grd=ctx.createLinearGradient(0,0,170,0);
grd.addColorStop(0,"black");
grd.addColorStop(1,"white");
ctx.fillStyle=grd;
ctx.fillRect(20,20,150,100); Cobalah sendiri " Dukungan Browser
Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung metode ini.
| metode | |||||
|---|---|---|---|---|---|
| addColorStop() | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Definisi dan Penggunaan
The addColorStop() metode menentukan warna dan posisi dalam sebuah objek gradien.
The addColorStop() metode yang digunakan bersama-sama dengan createLinearGradient() atau createRadialGradient() .
Note: Anda dapat menghubungi addColorStop() metode beberapa kali untuk mengubah gradien. Jika Anda menghilangkan metode ini untuk objek gradien, gradien tidak akan terlihat. Anda perlu membuat setidaknya satu warna berhenti untuk memiliki gradien terlihat.
| sintaks JavaScript: | gradient . addColorStop( stop , color ) ; |
|---|
Nilai parameter
| Parameter | Deskripsi | Mainkan |
|---|---|---|
| stop | Sebuah nilai antara 0,0 dan 1,0 yang mewakili posisi antara awal dan akhir di gradien | Mainkan " |
| color | Sebuah nilai warna CSS untuk menampilkan di stop posisi | Mainkan " |
Contoh lebih
Contoh
Tentukan gradien dengan beberapa addColorStop() metode:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var grd=ctx.createLinearGradient(0,0,170,0);
grd.addColorStop(0,"black");
grd.addColorStop("0.3","magenta");
grd.addColorStop("0.5","blue");
grd.addColorStop("0.6","green");
grd.addColorStop("0.8","yellow");
grd.addColorStop(1,"red");
ctx.fillStyle=grd;
ctx.fillRect(20,20,150,100);
Cobalah sendiri "