Coordenadas del Canvas

El elemento <canvas> de HTML es una potente característica de HTML5 que te permite crear y manipular gráficos en una página web utilizando JavaScript. El elemento canvas proporciona una superficie de dibujo bidimensional, que puede considerarse como una cuadrícula o sistema de coordenadas, cuya esquina superior izquierda tiene las coordenadas (0,0). El eje X aumenta horizontalmente hacia la derecha, y el eje Y aumenta verticalmente hacia abajo. Cada punto en el canvas se representa mediante un par de coordenadas (x, y) que definen su posición dentro de la cuadrícula.

Dibujar una línea

Los siguientes métodos se utilizan para dibujar una línea recta en un canvas:

moveTo(x,y), que especifica el punto de inicio de la línea
lineTo(x,y), que especifica el punto final de la línea

Utiliza uno de los métodos de "tinta" para dibujar una línea, por ejemplo, stroke().

Ejemplo del elemento HTML `<canvas>` para dibujar una línea:

Ejemplo del elemento HTML <canvas> para dibujar una línea

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <canvas width="300" height="150" style="border:1px solid #cccccc;" id="canvasExample">
      Your browser does not support the HTML5 canvas tag.
    </canvas>
    <script>
      var c = document.getElementById("canvasExample");
      var ctx = c.getContext("2d");
      // Starting point (0,0) is the top-left corner
      ctx.moveTo(0, 0);
      // Ending point (300,150) matches the canvas width and height
      ctx.lineTo(300, 150);
      ctx.strokeStyle = '#359900';
      ctx.stroke();
    </script>
  </body>
</html>

Try it Yourself »

En el ejemplo anterior, hemos definido los puntos de inicio y final de la línea, y hemos utilizado el método stroke() para dibujarla.

Dibujar un círculo

Los siguientes métodos se utilizan para dibujar un círculo en un canvas:

beginPath(), que inicia un trazado
arc(x,y,r,startangle,endangle), que crea un arco/curva. Si deseas crear un círculo con arc(): establece el ángulo inicial en 0 y el ángulo final en 2 * Math.PI. Las coordenadas x e y especifican el centro del círculo. El parámetro r especifica el radio del círculo.

Ejemplo del elemento HTML `<canvas>` para dibujar un círculo:

Ejemplo del elemento HTML <canvas> para dibujar un círculo:

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <canvas id="exampleCanvas" width="250" height="200" style="border:1px solid #dddddd;">
      The canvas tag is not supported by your browser.
    </canvas>
    <script>
      var canvas = document.getElementById("exampleCanvas");
      var ctx = canvas.getContext("2d");
      ctx.beginPath();
      // Center at (125, 95), radius 70. 125 is half of the 250 width.
      ctx.arc(125, 95, 70, 0, 2 * Math.PI);
      ctx.strokeStyle = '#1c87c9';
      ctx.closePath();
      ctx.stroke();
    </script>
  </body>
</html>

Try it Yourself »

En el ejemplo anterior, hemos definido un círculo con el método arc() y hemos utilizado el método stroke() para dibujarlo.

Práctica

¿Cuáles son las características de las coordenadas del elemento HTML5 <canvas>?

Son un sistema de cuadrícula bidimensional.La esquina superior izquierda del canvas corresponde a las coordenadas (0, 0).El valor x (horizontal) aumenta a medida que te mueves hacia la izquierda.El valor y (vertical) aumenta a medida que te mueves hacia abajo.Son un sistema de cuadrícula tridimensional.

Coordenadas del Canvas ​

Dibujar una línea ​

Ejemplo del elemento HTML <canvas> para dibujar una línea: ​

Dibujar un círculo ​