tutorial pengembangan web terbaru
 

HTML canvas addColorStop() Method

<HTML Canvas Referensi

Contoh

Tentukan gradien yang berlangsung dari hitam ke putih, sebagai gaya mengisi untuk persegi panjang:

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);
Cobalah sendiri "

Dukungan Browser

Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung metode ini.

metode
addColorStop() iya nih 9.0 iya nih iya nih iya nih

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() .

Catatan: 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 pada posisiberhenti Mainkan "

Contoh lebih

Contoh

Tentukan gradien dengan beberapa addColorStop() 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);
Cobalah sendiri "

<HTML Canvas Referensi