Dibujo en Canvas

JavaScript se utiliza para dibujar en el canvas. Lo haremos paso a paso.

1. Buscar el elemento Canvas

Para encontrar el elemento canvas, utiliza el método HTML DOM: getElementById():

Dibujo en Canvas

javascript

var canvas=document.getElementById("canvas");

2. Crear un objeto de dibujo

Utiliza el getContext() método para obtener un contexto de dibujo, que proporciona propiedades y métodos:

Dibujo en Canvas

javascript

var ctx = canvas.getContext("2d");

3. Dibujar en el elemento Canvas

Ahora puedes dibujar en el canvas. La propiedad fillStyle puede ser un color CSS, un patrón o un degradado.

Dibujo en Canvas

javascript

ctx.fillStyle = "#1c87c9";

También puedes utilizar el método fillRect(x, y, width, height) para dibujar un rectángulo relleno en el canvas. Los parámetros especifican las coordenadas x e y de la esquina superior izquierda, seguidas del ancho y el alto:

Dibujo en Canvas

javascript

ctx.fillRect(0, 0, 230, 130);

Ejemplo de la etiqueta HTML `<canvas>`:

Ejemplo de la etiqueta HTML <canvas>

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <canvas id="canvas" width="250" height="150" style="border:1px solid #dddddd;">
      The canvas tag is not supported by your browser.
    </canvas>
    <script>
      var canvas = document.getElementById("canvas");
      var ctx = canvas.getContext("2d");
      ctx.fillStyle = "#1c87c9";
      ctx.fillRect(0, 0, 230, 130)
    </script>
  </body>
</html>

Try it Yourself »

Práctica

¿Cuáles son los elementos necesarios para dibujar en un canvas HTML?

Una etiqueta canvas.Un bloque de código JavaScript.Una tabla HTML.Una hoja de estilos CSS.

Dibujo en Canvas ​

1. Buscar el elemento Canvas ​

2. Crear un objeto de dibujo ​

3. Dibujar en el elemento Canvas ​

Ejemplo de la etiqueta HTML <canvas>: ​

Práctica ​

Dibujo en Canvas

1. Buscar el elemento Canvas

2. Crear un objeto de dibujo

3. Dibujar en el elemento Canvas

Ejemplo de la etiqueta HTML `<canvas>`:

Práctica