Metode addColorStop() kanvas HTML
Contoh
Tentukan gradien yang berubah dari hitam menjadi putih, sebagai gaya isian 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);
Dukungan Peramban
Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung metode ini.
| Method | |||||
|---|---|---|---|---|---|
| addColorStop() | Yes | 9.0 | Yes | Yes | Yes |
Definisi dan Penggunaan
Metode addColorStop() menentukan warna dan posisi dalam objek gradien.
Metode addColorStop() digunakan bersama dengan createLinearGradient() atau createRadialGradient() .
Catatan: Anda dapat memanggil metode addColorStop() beberapa kali untuk mengubah gradien. Jika Anda menghilangkan metode ini untuk objek gradien, gradien tidak akan terlihat. Anda perlu membuat setidaknya satu perhentian warna untuk memiliki gradien yang terlihat.
| Sintaks JavaScript: | gradien .addColorStop( berhenti , warna ); |
|---|
Nilai Parameter
| Parameter | Description | Play it |
|---|---|---|
| stop | A value between 0.0 and 1.0 that represents the position between start and end in a gradient | |
| color | A CSS color value to display at the stop position |
Lebih Banyak Contoh
Contoh
Tentukan gradien dengan beberapa metode addColorStop():
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);
Referensi Kanvas HTML