tutorial pengembangan web terbaru
 

HTML canvas fillStyle Propery

<Canvas Object

Contoh

Tentukan merah mengisi warna untuk persegi panjang:

Yourbrowserdoesnotsupportthecanvastag.

JavaScript:

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

Dukungan Browser

Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung metode ini.

metode
fillStyle() 4.0 9.0 3.6 4.0 10.1

Definisi dan Penggunaan

The fillStyle set properti atau mengembalikan warna, gradien, atau pola yang digunakan untuk mengisi gambar.

nilai default: # 000000
sintaks JavaScript: context .fillStyle= color | gradient | pattern ;

Nilai properti

Nilai Deskripsi Mainkan
color Sebuah nilai warna CSS yang menunjukkan warna mengisi gambarnya. Nilai default adalah # 000000 Mainkan "
gradient Sebuah objek gradien ( linear atau radial ) digunakan untuk mengisi gambar
pattern Sebuah pola objek untuk menggunakan untuk mengisi gambar

contoh

Contoh lebih

Contoh

Tentukan gradien (top to bottom) sebagai gaya mengisi untuk persegi panjang:

Yourbrowserdoesnotsupportthecanvastag.

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);
Cobalah sendiri "

Contoh

Tentukan gradien (left to right) sebagai gaya mengisi untuk persegi panjang:

Yourbrowserdoesnotsupportthecanvastag.

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);
Cobalah sendiri "

Contoh

Tentukan gradien yang berlangsung dari hitam, merah, putih, sebagai gaya mengisi untuk persegi panjang:

Yourbrowserdoesnotsupportthecanvastag.

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);
Cobalah sendiri "

Gambar untuk digunakan:

Lampu

Contoh

Menggunakan gambar untuk mengisi gambar:

YourbrowserdoesnotsupporttheHTML5canvastag.

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();
Cobalah sendiri "

<Canvas Object