Properti fillStyle HTML canvas

Panduan Referensi HTML5 Canvas

Definisi dan penggunaan

fillStyle Properti yang menetapkan atau mengembalikan warna, gelombang, atau pattern pengisi perekam gambar.

Contoh

Contoh 1

Mendefinisikan lingkaran yang diisi dengan biru:

Peramban 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

Petunjuk:Ada banyak contoh lain di bawah halaman.

Sintaks

context.fillStyle=color|gradient|pattern;

Nilai properti

Nilai Keterangan
color Menunjukkan warna pengisi perekam gambar Nilai warna CSS.Nilai standar adalah #000000.
gradient Objek gelombang yang digunakan untuk mengisi perekam gambar (LinearatauRadio)
pattern Objek pattern yang digunakan untuk mengisi perekam gambar

Detil teknis

Nilai standar: #000000

Beberapa contoh lain

Contoh 2

Mendefinisikan gelombang dari atas ke bawah, sebagai gaya pengisi lingkaran:

Peramban 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

Mendefinisikan gelombang dari kiri ke kanan, sebagai gaya pengisi lingkaran:

Peramban 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

Mendefinisikan gelombang dari hitam ke merah ke putih, sebagai gaya pengisi lingkaran:

Peramban 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

Menggunakan gambar untuk mengisi perekam gambar:

Peramban 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 pertama yang mendukung atribut 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 Referensi HTML5 Canvas