Resumo : neste tutorial, você aprenderá como usar o strockRect()método JavaScript para desenhar um retângulo contornado em uma tela.
Introdução ao método JavaScript strokeRect()
Este strokeRect()é um método do contexto de desenho 2D. Permite strokeRect()desenhar um retângulo contornado com o estilo de traço derivado da strokeStylepropriedade atual.
O seguinte mostra a sintaxe do strokeRect()método:
ctx.strokeRect(x, y, width, height);Linguagem de código: CSS ( css )Nesta sintaxe:
xé a coordenada do eixo x do ponto inicial do retângulo.yé a coordenada do eixo y do ponto inicial do retângulo.widthé a largura do retângulo. Pode ser positivo ou negativo. Se forwidthpositivo, o método desenha o retângulo de (x,y) para a direita. Caso contrário, desenha o retângulo de (x,y) para a esquerda.heighté a altura do retângulo. E a altura também pode ser positiva ou negativa. Se for positivo, o método desenha o retângulo de baixo(x,y)para cima. Caso contrário, ele desenha o retângulo de(x,y)cima para baixo.
O strokeRect()desenha diretamente na tela sem modificar o caminho atual. Isso significa que qualquer chamada subsequente fill()não stroke()terá efeito.
O exemplo JavaScript strokeRect()
O seguinte mostra a index.htmlpágina que contém um elemento canvas:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript strokeRect</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>JavaScript strokeRect() Demo</h1>
<canvas id="canvas" height="400" width="500">
</canvas>
<script src="js/app.js"></script>
</body>
</html>Linguagem de código: HTML, XML ( xml )No arquivo app.js, defina uma função que desenhe dois retângulos contornados:
function drawOutlinedRects() {
const canvas = document.querySelector('#canvas');
if (!canvas.getContext) {
return;
}
const ctx = canvas.getContext('2d');
ctx.strokeStyle = 'red';
ctx.strokeRect(100, 100, 150, 100);
ctx.strokeStyle = 'green';
ctx.strokeRect(200, 150, -150, -100);
}
drawOutlinedRects();Linguagem de código: JavaScript ( javascript )A imagem a seguir mostra a saída:
Aqui está a demonstração de strokeRect().
Como funciona.
- Primeiro, selecione o elemento canvas usando o
querySelector()método. - A seguir, verifique se o navegador suporta a API canvas.
- Em seguida, obtenha o contexto do desenho 2D do elemento canvas.
- Depois disso, defina o estilo do traço
rede use ostrokeRect()método para desenhar o primeiro retângulo de contorno. - Por fim, defina o estilo do traço como verde e desenhe o segundo retângulo contornado. Nesse caso, passamos a largura e a altura negativas para o
strokeRect()método para desenhar o retângulo à esquerda e ao topo a partir de seu ponto inicial.
Resumo
- Use o
strokeRect()método para desenhar um retângulo contornado começando em (x, y) com largura e altura especificadas.
