Coordenadas de Canvas HTML

Coordenadas del lienzo

El lienzo HTML es una cuadrícula bidimensional.

Las coordenadas de la esquina superior izquierda del lienzo son (0,0).

En el capítulo anterior, usamos el método: fillRect(0,0,150,75).

Significa: dibuje un rectángulo de 150x75 píxeles comenzando desde la esquina superior izquierda (0,0).

Ejemplo de coordenadas

Coloque el cursor sobre el rectángulo siguiente para ver sus coordenadas x e y:

Dibujar línea

Para dibujar una línea recta en el lienzo, utilice los siguientes métodos:

• moveTo(x,y) - Definir el punto de partida de la línea
• lineTo(x,y) - Definir el final de la línea

Para dibujar realmente la línea, debe utilizar uno de los métodos de "pintura", como stroke().

Ejemplo

Defina el punto de partida en (0,0) y el punto de llegada en (200,100). Luego dibuje realmente la línea utilizando el método stroke().

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();

Pruebe usted mismo

Dibujar círculo

Para dibujar un círculo en el lienzo, utilice los siguientes métodos:

• beginPath() - Iniciar una ruta
• arc(x,y,r,startangle,endangle) - Crear arco/curva

Para crear un círculo utilizando arc(): configure el ángulo de inicio en 0, y el ángulo de finalización en 2 * Math.PI. Los parámetros x y y definen las coordenadas x e y del centro del círculo. El parámetro r define el radio del círculo.

Ejemplo

Se define un círculo utilizando el método arc(). Luego se dibuja el círculo realmente utilizando el método stroke().

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();

Pruebe usted mismo

Vea también:

Manual de referencia completo de Canvas en CodeW3C.com