Canvas - Gradien
Gradien dapat digunakan untuk mengisi persegi panjang, lingkaran, garis, teks, dll Bentuk di kanvas tidak terbatas pada warna solid.
Ada dua jenis gradien:
- createLinearGradient (x, y, x1, y1) - menciptakan gradien linier
- createRadialGradient (x, y, r, x1, y1, r1) - menciptakan radial / melingkar gradien
Setelah kita memiliki objek gradien, kita harus menambahkan dua atau lebih warna.
The addColorStop () metode menentukan berhenti warna, dan posisinya di sepanjang gradien. Posisi gradien bisa dimana saja antara 0 hingga 1.
Untuk menggunakan gradien, mengatur properti fillStyle atau strokeStyle ke gradien, kemudian menggambar bentuk (persegi panjang, teks, atau garis).
Menggunakan createLinearGradient ()
var canvas = document.getElementById("canvasku");
var ctx = canvas.getContext("2d");
// Membuat gradient
var grd = ctx.createLinearGradient(0,0,200,0);
grd.addColorStop (0,"red");
grd.addColorStop (1,"white");
//Isi dengan gradien
ctx.fillStyle = grd;
ctx.fillRect (10,10,180,80);
Menggunakan createRadialGradient ():
// Membuat gradient
var grd = ctx.createRadialGradient(100,50,5,100,60,100);
grd.addColorStop (0,"red");
grd.addColorStop (1,"white");
//Isi dengan gradien
ctx.fillStyle = grd;
ctx.fillRect (10,10,180,80);
0 komentar:
Posting Komentar