Latest web development tutorials

HTML canvas addColorStop () metode

Pedoman kanvas Referensi HTML Pedoman kanvas Referensi HTML

contoh

Tentukan gradien dari hitam ke putih, gaya persegi panjang mengisi:

YourbrowserdoesnotsupporttheHTML5canvastag.

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);

Coba »

Dukungan Browser

Internet ExplorerFirefoxOperaGoogle ChromeSafari

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

contoh yang lebih

contoh

Hal ini didefinisikan oleh sejumlah addColorStop gradien () metode:

Yourbrowserdoesnotsupportthecanvastag.

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);

Coba »


Pedoman kanvas Referensi HTML Pedoman kanvas Referensi HTML