HTML canvas fillStyle attribute

Panduan Rujukan HTML5 Canvas

Definition and Usage

fillStyle Attribute yang diatur atau mengembalikan warna, gelombang atau pattern pengisi perekaan.

Contoh

Contoh 1

Tentukan persegi panjang yang diisi dengan biru:

Browser anda tidak menyokong tag canvas.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#0000ff";
ctx.fillRect(20,20,150,100);

Coba Sendiri

Petikan:Lebih banyak contoh disediakan di bawah halaman.

Syntax

context.fillStyle=color|gradient|pattern;

Value of attribute

Value Description
color Menunjukkan warna pengisi perekaan Nilai warna CSS.Nilai lalai adalah #000000.
gradient Objek gelombang yang digunakan untuk mengisi perekaan (LinearatauRadio)
pattern Objek pattern yang digunakan untuk mengisi perekaan

Perincian teknikal

Nilai lalai: #000000

Lebih banyak contoh

Contoh 2

Tentukan gelombang dari atas ke bawah, sebagai gaya pengisi persegi panjang:

Browser anda tidak menyokong 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

Tentukan gelombang dari kiri ke kanan, sebagai gaya pengisi persegi panjang:

Browser anda tidak menyokong 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(1,"white");
ctx.fillStyle=my_gradient;
ctx.fillRect(20,20,150,100);

Coba Sendiri

Contoh 4

Tentukan gelombang dari hitam ke merah ke putih, sebagai gaya pengisi persegi panjang:

Browser anda tidak menyokong 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

Contoh 5

Imej yang digunakan:

kunci

Gunakan imej untuk mengisi perekaan:

Browser anda tidak menyokong tag HTML5 canvas.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("lamp");
var pat=ctx.createPattern(img,"repeat");
ctx.rect(0,0,150,100);
ctx.fillStyle=pat;
ctx.fill();

Coba Sendiri

Dukungan Browser

Angka di dalam tabel menunjukkan versi pertama penggunaan browser yang mendukung atribut ini penuh.

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

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

Panduan Rujukan HTML5 Canvas