Dibujar rectángulos a través de canvas en JavaScript
No es necesario dibujar cuadrados y rectángulos
usando combinaciones de moveTo,
lineTo - para eso hay métodos más simples.
Vamos a analizarlos.
Método strokeRect
El método strokeRect(x, y, ancho,
alto) dibuja el contorno de un rectángulo
en el punto especificado. Los dos primeros parámetros
establecen las coordenadas del punto donde estará
la esquina superior izquierda del rectángulo dibujado.
Dibujemos un rectángulo usando
strokeRect (asumimos que ctx
ya 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
El método fillRect(x, y, ancho, alto)
funciona igual que strokeRect,
pero dibuja un rectángulo relleno.
Veamos un ejemplo:
<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
El siguiente método rect(x, y, ancho,
alto) también dibuja un rectángulo. Pero
este rectángulo se volverá visible solo
si se aplica el método stroke o fill.
En el primer caso será un contorno, y en el segundo
- una figura rellena.
Dibujemos un 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();
:
Y ahora dibujemos una figura rellena:
<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
El siguiente método clearRect(x, y,
ancho, alto) funciona como un borrador,
limpiando un área rectangular y haciendo
su contenido completamente transparente.
Dibujemos un cuadradito usando fillRect
y borremos una parte con 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);
:
