Atribut fillStyle Canvas

Panduan Rujukan Canvas

Definisi dan penggunaan

fillStyle Tetapan sifat atau kembalikan warna, gelombang atau pola untuk penukaran gambar.

Contoh

Contoh 1

Definisi kotak 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

Petikan:Beberapa contoh lain disediakan di bawah halaman.

Sintaks

context.fillStyle=color|gradient|pattern;

Nilai properti

Nilai Deskripsi
color Menunjukkan warna pengisian pengeritahan gambar Nilai warna CSS).Nilai baku adalah #000000.
gradient Objek gelombang yang digunakan untuk mengisi pengeritahan gambar (LinearatauRadioactive)
pattern Objek pattern yang digunakan untuk mengisi pengeritahan gambar.

Detil teknis

Nilai baku: #000000

Beberapa contoh lain

Contoh 2

Definisi gelombang dari atas ke bawah, sebagai gaya isian kotak:

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 kotak:

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 kotak:

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

Imej yang digunakan:

kunci

Gunakan imej untuk mengisi pengeritahan gambar:

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 dalam jadwal menunjukkan versi paling awal penggunaan browser yang mendukung sifat ini.

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 Canvas