Metode createLinearGradient() kanvas HTML

Referensi Kanvas HTML

Contoh

Tentukan gradien (kiri ke kanan) yang berubah dari hitam menjadi putih, sebagai gaya isian untuk persegi panjang:

Peramban Anda tidak mendukung kanvas HTML5.

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

Dukungan Peramban

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

Method
createLinearGradient() Yes 9.0 Yes Yes Yes

Definisi dan Penggunaan

Metode createLinearGradient() membuat objek gradien linier.

Gradien dapat digunakan untuk mengisi persegi panjang, lingkaran, garis, teks, dll.

Tip: Gunakan objek ini sebagai nilai untuk properti strokeStyle atau fillStyle .

Tip: Gunakan metode addColorStop() untuk menentukan warna yang berbeda, dan di mana memposisikan warna dalam objek gradien.

Sintaks JavaScript: konteks .createLinearGradient( x0,y0,x1,y1 );

Nilai Parameter

Parameter Description
x0 The x-coordinate of the start point of the gradient
y0 The y-coordinate of the start point of the gradient
x1 The x-coordinate of the end point of the gradient
y1 The y-coordinate of the end point of the gradient

Lebih Banyak Contoh

Contoh

Tentukan gradien (atas ke bawah) sebagai gaya isian untuk persegi panjang:

Peramban Anda tidak mendukung tag kanvas.

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

Contoh

Tentukan gradien yang berubah dari hitam, merah, putih, sebagai gaya isian untuk persegi panjang:

Peramban Anda tidak mendukung tag kanvas.

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

Referensi Kanvas HTML