Desenhando retângulos via canvas em JavaScript
Não é necessário desenhar quadrados e retângulos
usando combinações de moveTo e
lineTo - existem métodos mais simples para isso.
Vamos analisá-los.
Método strokeRect
O método strokeRect(x, y, largura,
altura) desenha o contorno de um retângulo
em um ponto determinado. Os dois primeiros parâmetros
definem as coordenadas do ponto onde o canto
superior esquerdo do retângulo desenhado ficará.
Vamos desenhar um retângulo usando
strokeRect (assumindo que ctx
já existe):
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.strokeRect(50, 50, 100, 75);
:
Método fillRect
O método fillRect(x, y, largura, altura)
funciona da mesma forma que strokeRect,
mas desenha um retângulo preenchido.
Vejamos um exemplo:
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.fillRect(50, 50, 100, 75);
:
Método rect
O próximo método rect(x, y, largura,
altura) também desenha um retângulo. No entanto,
este retângulo só se tornará visível se
o método stroke ou fill for aplicado.
No primeiro caso, será o contorno, e no segundo
- a forma preenchida.
Vamos desenhar um contorno usando rect:
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.rect(50, 50, 100, 75);
ctx.stroke();
:
E agora vamos desenhar a forma preenchida:
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.rect(50, 50, 100, 75);
ctx.fill();
:
Método clearRect
O próximo método clearRect(x, y,
largura, altura) funciona como uma borracha,
limpando uma área retangular e tornando o
conteúdo completamente transparente.
Vamos desenhar um quadrado usando fillRect
e apagar parte dele com clearRect:
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.fillRect(50, 50, 100, 100);
ctx.clearRect(75, 75, 50, 50);
:
