Canvas createLinearGradient() 方法

Panduan Referensi Canvas

定义和用法

createLinearGradient() Metode untuk membuat objek gelombang linier.

Gelombang dapat digunakan untuk mengisi persegi, lingkaran, garis, teks, dan lain-lain.

Petunjuk:Gunakan objek ini sebagai strokeStyle atau fillStyle nilai atribut.

Petunjuk:Gunakan addColorStop() Metode menentukan warna yang berbeda, serta tempat lokasi warna dalam objek gradient.

Contoh

Lihat pula:

Definiskan gelombang dari hitam ke putih (dari kiri ke kanan) sebagai gaya pengisi persegi.

Browser Anda tidak mendukung tag HTML5 canvas.

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

Coba sendiri

Sintaks

context.createLinearGradient(x0,y0,x1,y1);

Nilai parameter

Parameter Deskripsi
x0 Koordinat x awal gelombang.
y0 Koordinat y awal gelombang.
x1 Koordinat x akhir gelombang.
y1 Koordinat y akhir gelombang.

Beberapa contoh lain

Contoh 2

Definiskan gelombang (dari atas ke bawah) sebagai gaya pengisi persegi.

Browser Anda tidak mendukung tag canvas.

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

Coba sendiri

Contoh 3

Definiskan gelombang yang berubah dari hitam ke merah lalu putih sebagai gaya pengisi persegi.

Browser Anda tidak mendukung tag canvas.

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

Coba sendiri

Dukungan browser

Angka di tabel menunjukkan versi browser yang pertama yang sepenuhnya mendukung atribut ini.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

Keterangan:Internet Explorer 8 dan versi sebelumnya tidak mendukung elemen <canvas>.

Panduan Referensi Canvas