Manual de referência HTML

大全 de etiquetas HTML

Método HTML canvas rect()

rect() é Canvas 2Método de criação de caminho retangular do D API, a posição de início do retângulo é (x, y), o tamanho é width e height. O retângulo4pontos conectados por linhas, o sub-ponto como etiqueta de fechamento, então você pode preencher ou contornar o retângulo.

Manual de referência do canvas do HTML

Exemplo online

Desenhar 150*10Retângulo de 0 pixels:

Exemplo

!DOCTYPE html>
<html>
<head>
<title>HTML canvas rect() 方法的使用(基础教程网 oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" width="300" altura="150" estilo="border:1px sólido #d3d3d3>
Seu navegador não suporta HTML5　etiqueta canvas.
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.rect(20,20,150,100);
ctx.stroke();
</script>　
</body>
</html>

Testar e ver ‹/›

Compatibilidade do navegador

IEFirefoxOperaChromeSafari

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

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

Definição e uso

O método rect() cria um retângulo.

Dica:Use stroke() oufill() Método que desenha realmente o retângulo no canvas.

Sintaxe em JavaScript:	context.rect(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.

Exemplo online

Crie três retângulos usando o método rect():

Exemplo

!DOCTYPE html>
<html>
<head>
<title>HTML canvas rect() 方法的使用(基础教程网 oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" width="300" altura="150" estilo="border:1px sólido #d3d3d3>
Seu navegador não suporta HTML5　etiqueta canvas.
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
//　Retângulo vermelho
ctx.beginPath();
ctx.lineWidth="6";
ctx.strokeStyle="red";
ctx.rect(5,5,290,140);　　
ctx.stroke();
//　Retângulo verde
ctx.beginPath();
ctx.lineWidth="4";
ctx.strokeStyle="green";
ctx.rect(30,30,50,50);
ctx.stroke();
//　Retângulo azul
ctx.beginPath();
ctx.lineWidth="10";
ctx.strokeStyle="blue";
ctx.rect(50,50,150,80);
ctx.stroke();
</script>　
</body>
</html>

Testar e ver ‹/›

Manual de referência do canvas do HTML

HTML: <template> etiqueta