Canvas - Gradien
Gradien dapat digunakan untuk mengisi persegi panjang, lingkaran, garis, teks, dll Bentuk di kanvas tidak terbatas pada warna solid.
Ada dua jenis yang berbeda dari gradien:
- createLinearGradient ( x,y,x1,y1 ) - menciptakan gradien linier
- createRadialGradient ( x,y,r,x1,y1,r1 ) - menciptakan radial / melingkar gradien
Setelah kami memiliki objek gradien, kita harus menambahkan dua atau lebih berhenti warna.
The addColorStop() metode menentukan berhenti warna, dan posisinya di sepanjang gradien. posisi gradien dapat di mana saja antara 0-1.
Untuk menggunakan gradien, mengatur fillStyle atau strokeStyle properti untuk gradien, kemudian menggambar bentuk (rectangle, text, or a line) .
Menggunakan createLinearGradient()
Contoh
Buat gradien linier. Isi persegi panjang dengan gradien:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// Create gradient
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80); Cobalah sendiri " Menggunakan createRadialGradient() :
Contoh
Buat radial / melingkar gradien. Isi persegi panjang dengan gradien:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// Create gradient
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10,10,150,80); Cobalah sendiri "