Vlastnost HTML canvas fillStyle

❮ HTML Canvas Reference

Příklad

Definujte červenou barvu výplně pro obdélník:

Váš prohlížeč nepodporuje canvastag.

JavaScript:

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

Podpora prohlížeče

Čísla v tabulce určují první verzi prohlížeče, která tuto metodu plně podporuje.

Method
fillStyle() Yes 9.0 Yes Yes Yes

Definice a použití

Vlastnost fillStyle nastavuje nebo vrací barvu, přechod nebo vzor použitý k vyplnění výkresu.

Výchozí hodnota: #000000
Syntaxe JavaScriptu: kontext .fillStyle= barva | gradient | vzor ;

Hodnoty vlastností

Value Description Play it
color A CSS color value that indicates the fill color of the drawing. Default value is #000000
gradient A gradient object (linear or radial) used to fill the drawing  
pattern A pattern object to use to fill the drawing  

Další příklady

Příklad

Definujte přechod (shora dolů) jako styl výplně pro obdélník:

Váš prohlížeč nepodporuje canvastag.

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);

Příklad

Definujte přechod (zleva doprava) jako styl výplně pro obdélník:

Váš prohlížeč nepodporuje canvastag.

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);

Příklad

Definujte přechod od černé přes červenou až po bílou jako styl výplně obdélníku:

Váš prohlížeč nepodporuje canvastag.

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);

Obrázek k použití:

Svítilna

Příklad

K vyplnění výkresu použijte obrázek:

Váš prohlížeč nepodporuje HTML5canvatag.

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();

❮ HTML Canvas Reference