tutoriais mais recente desenvolvimento web
 

HTML canvas fillStyle Propery

<Object Canvas

Exemplo

Definir um fill-cor vermelha para o retângulo:

Yourbrowserdoesnotsupportthecanvastag.

JavaScript:

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

Suporte navegador

Os números na tabela especificar a primeira versão do navegador que suporta totalmente o método.

Método
fillStyle() 4.0 9 3,6 4.0 10.1

Definição e Uso

Os fillStyle conjuntos de propriedades ou retorna a cor, gradiente ou padrão usado para preencher o desenho.

Valor padrão: # 000000
sintaxe JavaScript: context .fillStyle= color | gradient | pattern ;

Valores de propriedade

Valor Descrição Jogue
color Um valor de cor CSS que indica a cor de preenchimento do desenho. O valor padrão é # 000000 Jogue "
gradient Um objecto gradiente ( linear ou radial ) utilizado para preencher o desenho
pattern Um padrão de objeto para usar para preencher o desenho

Exemplos

mais Exemplos

Exemplo

Definir um gradiente (top to bottom) como o modelo de preenchimento para o rectângulo:

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);
Tente você mesmo "

Exemplo

Definir um gradiente (left to right) como o estilo de preenchimento para o retângulo:

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);
Tente você mesmo "

Exemplo

Definir um gradiente que vai de preto, ao vermelho, ao branco, como o estilo de preenchimento para o retângulo:

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);
Tente você mesmo "

Imagem a ser usada:

Luminária

Exemplo

Use uma imagem para preencher o desenho:

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();
Tente você mesmo "

<Object Canvas