HTML canvas addColorStop () metode
contoh
Tentukan gradien dari hitam ke putih, gaya persegi panjang mengisi:
JavaScript:
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);
Coba »
Dukungan Browser
Internet Explorer 9, Firefox, Opera, Chrome dan Safari dukungan addColorStop () metode.
Catatan: 8 dan versi sebelumnya dari Internet Explorer tidak mendukung <canvas> elemen.
Definisi dan Penggunaan
addColorStop () metode menentukan warna gradient objek dan posisi.
addColorStop () metode createLinearGradient () atau createRadialGradient () digunakan bersama-sama.
Catatan: Anda dapat menghubungi addColorStop () metode beberapa kali untuk mengubah gradien.Jika Anda bukan objek gradien, menggunakan metode ini, gradien tidak akan terlihat. Dalam rangka untuk mendapatkan gradien terlihat, Anda perlu membuat setidaknya satu warna.
sintaks JavaScript: | gradien.addColorStop (berhenti, warna); |
---|
Nilai parameter
参数 | 描述 |
---|---|
stop | 介于 0.0 与 1.0 之间的值,表示渐变中开始与结束之间的位置。 |
color | 在stop位置显示的 CSS 颜色值 。 |
contoh yang lebih
contoh
Hal ini didefinisikan oleh sejumlah addColorStop gradien () metode:
JavaScript:
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);
Coba »
Pedoman kanvas Referensi HTML