Contoh
Tentukan gradien (left to right) yang berlangsung dari hitam ke putih, sebagai gaya mengisi untuk persegi panjang:
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 | |||||
|---|---|---|---|---|---|
| createLinearGradient() | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Definisi dan Penggunaan
The createLinearGradient() metode membuat objek gradien linier.
gradien dapat digunakan untuk mengisi persegi panjang, lingkaran, garis, teks, dll
Tip: Gunakan objek ini sebagai nilai ke strokeStyle atau fillStyle properti.
Tip: Gunakan addColorStop() metode untuk menentukan warna yang berbeda, dan di mana posisi warna pada objek gradien.
| sintaks JavaScript: | context . createLinearGradient( x0,y0,x1,y1 ) ; |
|---|
Nilai parameter
| Parameter | Deskripsi |
|---|---|
| x0 | Koordinat x dari titik awal dari gradien |
| y0 | Y-koordinat titik awal dari gradien |
| x1 | Koordinat x dari titik akhir gradien |
| y1 | Y-koordinat titik akhir gradien |
Contoh lebih
Contoh
Tentukan gradien (top to bottom) sebagai gaya mengisi untuk persegi panjang:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var my_gradient=ctx.createLinearGradient(0,0,0,170);
my_gradient.addColorStop(0,"black");
my_gradient.addColorStop(1,"white");
ctx.fillStyle=my_gradient;
ctx.fillRect(20,20,150,100);
Cobalah sendiri " Contoh
Tentukan gradien yang berlangsung dari hitam, merah, putih, sebagai gaya mengisi untuk persegi panjang:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var my_gradient=ctx.createLinearGradient(0,0,170,0);
my_gradient.addColorStop(0,"black");
my_gradient.addColorStop(0.5,"red");
my_gradient.addColorStop(1,"white");
ctx.fillStyle=my_gradient;
ctx.fillRect(20,20,150,100);
Cobalah sendiri " <Canvas Object