Notas de experiência

ISO de HTML

: <progress> tag

Método fillRect() do HTML canvas 2A função fillRect() é usada no Canvas

Exemplo online

Desenhar 100*100 pixel quadrado preenchido:

Exemplo

<!DOCTYPE html>
<html>
<head>
<title>Uso do método fillRect() no HTML canvas (Tutorial básico da Web oldtoolbag.com)</<title>
</<head>
<body>
<canvas id="myCanvas" width="200" height="150" style="border:1px solid #d3d3d3>
O seu navegador não suporta o HTML5　canvas 标签。
</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillRect(20,20,100,100);
</script>
</body>
</html>

Teste e veja ‹/›

Compatibilidade do navegador

IEFirefoxOperaChromeSafari

Internet Explorer 9e Firefox, Opera, Chrome e Safari suportam o método fillRect().

Atenção:Internet Explorer 8 Versões anteriores não suportam o elemento <canvas>.

Definição e uso

O método fillRect() desenha um retângulo 'preenchido'. A cor padrão de preenchimento é preta.

Dica:Use fillStyle Propriedade para definir a cor, gradiente ou padrão usados para preencher o desenho.

Sintaxe JavaScript:	context.fillRect(x,y,width,height);

Valor do parâmetro

Parâmetro	Descrição
x	Coordenada x do canto superior esquerdo do retângulo.
y	Coordenada y do canto superior esquerdo do retângulo.
width	Largura do retângulo, em pixels.
height	Altura do retângulo, em pixels.

Manual de referência do canvas HTML

HTML: <template> tag