Dibujo de líneas a través de canvas en JavaScript
Empecemos con algo simple: dibujar líneas. Para entender cómo se hace, imagina que tienes una hoja de papel y un lápiz. Tú puedes dibujar en esta hoja, o puedes sin dibujar simplemente mover el lápiz al punto deseado.
JavaScript funciona de la misma manera: tiene
un lápiz (o pluma para dibujar), al lugar
deseado puedes moverlo usando
el método moveTo, y dibujar - con el
método lineTo.
Ambos métodos aceptan como parámetros el punto
al que mover la punta de la pluma - el primer parámetro
la coordenada horizontal, y el segundo - la
vertical. El origen de coordenadas - punto 0,
0 - es la esquina superior izquierda del elemento.
Cuando la pluma se mueve al punto deseado -
el método moveTo simplemente mueve, y
lineTo en el proceso de movimiento dibuja
una línea desde la posición actual de la pluma hasta el punto
al que se moverá.
Sin embargo, si ejecutas el código anterior
- no pasará nada: es necesario escribir
dos comandos más: el primer comando beginPath
debe indicarse antes de comenzar a dibujar la
línea, y el segundo comando stroke debe
ser llamado después de todas las combinaciones de moveTo
y lineTo para que la línea se dibuje.
Entonces, escribamos un código funcional para dibujar una línea:
Dibujemos una línea
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(150, 50);
ctx.stroke();
:
Dibujemos una pajarita
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(100, 100);
ctx.lineTo(150, 50);
ctx.stroke();
:
Dibujemos un triángulo
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(100, 100);
ctx.lineTo(150, 50);
ctx.lineTo(50, 50);
ctx.stroke();
:
Dibujemos un cuadradito
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(150, 50);
ctx.lineTo(150, 150);
ctx.lineTo(50, 150);
ctx.closePath();
ctx.stroke();
:
Cierre de figuras
Para dibujar una figura cerrada no es necesario
hacer todas las líneas - la última línea puede
dibujarse automáticamente y cerrar la figura.
Para esto, antes del método stroke se debe
llamar al método closePath.
Este método intenta cerrar la figura, dibujando una línea recta desde el punto final al inicial. Si la figura ya estaba cerrada o es simplemente un punto, entonces el método no hace nada.
Dibujemos un triángulo usando closePath:
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(100, 100);
ctx.lineTo(150, 50);
//ctx.lineTo(50, 50); - omitimos este paso
ctx.closePath();
ctx.stroke();
:
Relleno de figuras
En lugar del método stroke se puede usar
el método fill - en este caso la figura no necesariamente
tiene que estar completamente cerrada - se rellenará
de todas formas:
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(100, 100);
ctx.lineTo(150, 50);
//ctx.lineTo(50, 50); - omitimos este paso
//ctx.closePath(); - y este también
ctx.fill();
:
