Coordenadas de lona
El lienzo HTML es una rejilla de dos dimensiones.
La esquina superior izquierda del lienzo tiene las coordenadas (0,0)
En el capítulo anterior, que lo vio método utilizado: fillRect(0,0,150,75) .
Esto significa: Comienza en la esquina superior izquierda (0,0) y dibujar un rectángulo 150x75 píxeles.
Ejemplo coordenadas
Ratón sobre el rectángulo de abajo para ver su coordenadas X e Y:
Dibuja una línea
Para dibujar una línea recta en un lienzo, utilice los métodos siguientes:
- moveTo( x,y ) - define el punto inicial de la línea
- lineTo( x,y ) - define el punto final de la línea
Para trazar la línea en realidad, debe utilizar uno de los "ink" métodos, como stroke() .
Ejemplo
Definir un punto de partida en la posición (0,0) , y un punto final en la posición (200,100) . A continuación, utilice el stroke() método para trazar la línea en realidad:
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke(); Inténtalo tú mismo " Dibuja un circulo
Para dibujar un círculo en un lienzo, utilice los métodos siguientes:
- beginPath() - comienza un camino
- arc(x,y,r,startangle,endangle) - crea un arco / curva. Para crear un círculo con arc() : Set ángulo inicial y el ángulo a 0 final a 2 * Math.PI. Los parámetros x y y definen los ejes x e y las coordenadas del centro del círculo. El parámetro r define el radio del círculo.
Ejemplo
Definir un círculo con el arc() método. A continuación, utilice el stroke() método para dibujar en realidad 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(); Inténtalo tú mismo "