Atribut fillStyle Canvas

Panduan Referensi Canvas

Definisi dan penggunaan

fillStyle Pengaturan atribut atau kembalikan warna, gradien, atau pola untuk mengisi gambar.

Contoh

Contoh 1

Definisi segi empat yang diisi dengan biru:

Browser Anda tidak mendukung tag canvas.

JavaScript:

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

Coba sendiri

Peringatan:Beberapa contoh lainnya disediakan di dasar halaman.

Syarat

context.fillStyle=color|gradient|pattern;

Nilai atribut

Nilai Deskripsi
color Menunjukkan warna pengisian gambar perekaan Nilai warna CSS）。Nilai standar adalah #000000。
gradient Objek gelombang yang digunakan untuk mengisi gambar perekaan（LinearatauRadio）。
pattern Objek pattern yang digunakan untuk mengisi gambar perekaan.

Detil teknis

Nilai standar: #000000

Beberapa contoh lainnya

Contoh 2

Definisi gelombang dari atas ke bawah sebagai gaya isian segi empat:

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

Definisi gelombang dari kiri ke kanan sebagai gaya isian segi empat:

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

Coba sendiri

Contoh 4

Definisi gelombang dari hitam ke merah ke putih sebagai gaya isian segi empat:

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

Contoh 5

Gambar yang digunakan:

lamp

Gunakan gambar untuk mengisi gambar perekaan:

Browser Anda tidak mendukung 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 tabel menunjukkan versi browser yang pertama yang mendukung atribut ini penuhnya.

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 Referensi Canvas