CanvasRenderingContext2D.fillStyle
A propriedade CanvasRenderingContext2D.fillStyle
da API do Canvas 2D especifica a cor ou o estilo para usar regiões internas. O valor inicial é #000
(preto).
Veja também o capítulo Aplicando estilos e cores no Canvas Tutorial.
Sintaxe
ctx.fillStyle = color; ctx.fillStyle = gradient; ctx.fillStyle = pattern;
Opções
color
gradient
-
Um objeto
CanvasGradient
(en-US) (um gradiente linear ou radial). pattern
-
Um objeto
CanvasPattern
(en-US) (uma imagem repetitiva).
Examples
Usando a propriedade fillStyle
para definir uma cor diferente
Isto é apenas um trecho de código simples usando a propriedade fillStyle
para definir uma cor diferente.
HTML
<canvas id="canvas"></canvas>
JavaScript
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'blue';
ctx.fillRect(10, 10, 100, 100);
Edite o código abaixo e veja as alterações atualizadas na tela:
Um exemplo de fillStyle
com laços for
Neste exemplo, nós usamos dois laços for
para desenhar uma grade de retângulos, cada um com uma cor diferente. A imagem resultante deve parecer algo como uma captura de tela. Não há nada de espetacular acontecendo aqui. Usamos as duas variáveis i
é j
para gerar uma cor RGB exclusiva para cada quadrado, e apenas modificamos os valores vermelho e verde. O canal azul tem um valor fixo. Ao modificar os canais, você pode gerar todos os tipos de paletas. Ao aumentar os valores, você pode conseguir algo que pareça com as paletas de cores que o Photoshop usa.
var ctx = document.getElementById('canvas').getContext('2d');
for (var i = 0; i < 6; i++){
for (var j = 0; j < 6; j++){
ctx.fillStyle = 'rgb(' + Math.floor(255 - 42.5 * i) + ',' +
Math.floor(255 - 42.5 * j) + ',0)';
ctx.fillRect(j * 25, i * 25, 25, 25);
}
}
O resultado fica assim:
Screenshot | Live sample |
---|---|
![]() |
Especificações
Especificação | Estado | Comentário |
---|---|---|
HTML Living Standard The definition of 'CanvasRenderingContext2D.fillStyle' in that specification. |
Padrão em tempo real |
Compatibibidade com o Navegador
BCD tables only load in the browser
Notas específicas doWebKit/Blink
- Nos navegadores baseados em WebKit e Blink, além da propriedade
fillStyle
, o método não padrão e obsoletoctx.setFillColor()
é implementado.setFillColor(color, optional alpha); setFillColor(grayLevel, optional alpha); setFillColor(r, g, b, a); setFillColor(c, m, y, k, a);
Veja também
- A interface que o define,
CanvasRenderingContext2D
CanvasGradient
(en-US)CanvasPattern
(en-US)