Manual de Referência HTML

大全 de etiquetas HTML

Método HTML canvas strokeRect()

strokeRect() é o método Canvas 2O método D API desenha um retângulo na canvas usando o estilo de desenho atual, com um ponto de partida em (x, y), largura w e altura h. Este método desenha diretamente na tela sem modificar o caminho atual, portanto, qualquer chamada subsequente fill() ou stroke() não o afeta.

Manual de referência do canvas HTML

Exemplo Online

Desenhar 100*100 pixel quadrado:

Exemplo

<!DOCTYPE html>
<html>
<head>
<title>Uso do método HTML canvas strokeRect() (Tutoriais Básicos da Web oldtoolbag.com)</<title>
</<head>
<body>
<canvas id="myCanvas" width="300" altura="150" estilo="borda:1px sólido #d3d3d3">
Seu navegador não suporta HTML5　canvas etiqueta.
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2);
ctx.strokeRect(20,20,100,100);
</script>
</body>
</html>

Teste e veja ‹/›

Compatibilidade do navegador

IEFirefoxOperaChromeSafari

Internet Explorer 9e Firefox, Opera, Chrome e Safari suportam strokeRect() Método.

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

Definição e uso

A função strokeRect() desenha um retângulo (sem preenchimento). A cor padrão das linhas é preta.

Dica:Use strokeStyle Propriedade para definir a cor, gradiente ou padrão da caneta.

Sintaxe JavaScript:	context.strokeRect(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> etiqueta