Coordenadas de lienzo HTML
Coordenadas del lienzo
El lienzo HTML es una cuadrícula bidimensional.
La esquina superior izquierda del lienzo tiene las coordenadas (0,0)
En el capítulo anterior, viste este método utilizado: fillRect(0,0,150,75).
Esto significa: Comience en la esquina superior izquierda (0,0) y dibuje un rectángulo de 150x75 píxeles.
Ejemplo de coordenadas
Pase el mouse sobre el rectángulo a continuación para ver sus coordenadas x e y:
Dibuja una línea
Para dibujar una línea recta en un lienzo, use los siguientes métodos:
- moveTo( x,y ) - define el punto de inicio de la línea
- lineTo( x,y ) - define el punto final de la línea
Para dibujar la línea, debe usar uno de los métodos de "tinta", como trazo().
Ejemplo
Defina un punto inicial en la posición (0,0) y un punto final en la posición (200,100). Luego usa el método stroke() para dibujar la línea:
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();
Dibuja un circulo
Para dibujar un círculo en un lienzo, use los siguientes métodos:
- beginPath() - comienza un camino
- arc(x,y,r,startangle,endangle) - crea un arco/curva. Para crear un círculo con arc(): establezca el ángulo inicial en 0 y el ángulo final en 2*Math.PI. Los parámetros x e y definen las coordenadas x e y del centro del círculo. El parámetro r define el radio del círculo.
Ejemplo
Defina un círculo con el método arc(). Luego usa el método stroke() para dibujar el círculo:
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();