Introducción al API de canvas (1)

En esta primera entrada de una serie breve dedicada al api de canvas veremos cómo se declara un lienzo y cómo se dibujan líneas.

malevich

archivado en: JavaScript / 4 enero, 2013 / taller:

La aplicación de canvas es una de las novedades de HTML5. Sirve para realizar dibujos al vuelo y funciona mediante JavaScript, pero que no se asuste quien desconozca este lenguaje porque es realmente sencillo y es algo que vale la pena aprender pues, a diferencia de Flash, es una tecnología libre, tal y como conviene que sea Internet.

Ya soportan la aplicación Chrome, Firefox, Safari y el Explorer a partir de su versión 9; y se puede utilizar para muchas cosas, como juegos, aplicaciones, presentaciones... En fin, el límite es la imaginación.

El término canvas, que en inglés significa lienzo, deriva del tag <canvas>, que es el contenedor del dibujo. Se inserta donde se quiera incluir en el código HTML y puede recibir tres atributos: un id único que servirá para referenciarlo en el script, el ancho y el alto.

  • <canvas id="mi_lienzo" width="600" height="200"></canvas>

Este lienzo cuenta con su propio sistema de coordenadas, cuyo punto 0,0 se encuentra en la esquina superior izquierda.

Y dicho esto veamos ya cómo hacer dibujicos...

El contexto del lienzo

Una vez definido el lienzo mediante el tag <canvas>, hay que convertirlo en un objeto de JavaScript para trabajar sobre él. Para eso, primero recuperamos el ID en una variable y, luego, mediante el método getContext('2d') lo convertimos en un objeto canvas.

  • <script>
  • var mi_canvas = document.getElementById('mi_lienzo');
  • var mi_contexto = mi_canvas.getContext('2d');
  • El código aquí...
  • </script>

Hecho esto, podemos aplicar ya todos los «métodos» de la aplicación canvas a mi_contexto, que es donde hemos «almacenado» el lienzo convertido en objeto.

Dicho de otra forma, cada lienzo de una página, pues puede haber varios, se trabaja una vez escritas dos sentencias, en la primera se recupera el ID del elemento y en la segunda se convierte en un objeto canvas, del cual ya podemos emplear sus métodos y propiedades con la sintaxis habitual de JavaScript, es decir, la notación de puntos.

  • mi_objeto.metodo

Nota: la manera de definir los valores es distinta entre métodos y propiedades. Para los métodos, se indican entre paréntesis y para las propiedades con el signo igual y comillas.

  • metodo(valor 1, valor 2, valor n)
  • propiedad ="valor"

Este galimatías se entenderá bien una vez que se hagan un par de dibujos, así que vamos a empezar ya 🙂 .

Líneas

La definición de una línea —es decir, su posición, recorrido, ancho y color— se realiza entremedias de dos métodos: beginPath()stroke(). Con el primero indicamos que comienza una declaración de especificaciones de la línea a dibujar y con el segundo que se dibuje.

  • <script>
  • var mi_canvas = document.getElementById('mi_lienzo');
  • var mi_contexto = mi_canvas.getContext('2d');
  • mi_contexto.beginPath();
  • El código aquí...
  • mi_contexto.stroke();
  • </script>

Para las especificaciones existen los siguientes métodos:

  • moveTo(x,y): las dos coordenadas iniciales, donde «x» es la posición horizontal e «y» la vertical.
  • lineTo(x, y): las dos coordenadas finales de la línea, donde concluye el recorrido.

Además, se pueden especificar los valores de las siguientes propiedades específicas:

  • lineWidth: el ancho de la línea.
  • lineCap: la terminación de la línea (normal, butt, que es la que va por defecto ; redondeada, round; y cuadrada, square).
  • lineJoin: define cómo se muestra la confluencia de dos líneas (bever: partida; round: redondeada; miter, que es la que hay por defecto, en triángulo)
  • miterLimit: cuando está definido en lineJoin miter, define el ángulo de separación del remate triangular.

Por último, contamos también con una serie de propiedades generales de sombra, estilo y color que se pueden aplicar a las líneas al igual que a otros elementos.

Para las sombras son:

  • shadowColor(): define el color de la sombra.
  • shadowBlur(): la profundidad del desenfoque de la sombra.
  • shadowOffsetX(): la distancia de la sombra en su coordenada x respecto a la figura.
  • shadowOffsetY(): la distancia de la sombra en su coordenada y respecto a la figura.

Para el color o estilo, la propiedad es strokeStyle(), que puede tener los siguientes valores:

  • Un color rgb: strokeStyle="#900".
  • Un degradado, que ya veremos cómo se hace.
  • Un patrón, que también veremos más adelante.

Hay otra propiedad general más, fillStyle, que define los rellenos de las formas, pero que en el caso de las líneas, claro está, carece de sentido, así que la dejamos para luego.

Bueno, pues con todo esto que hemos visto ya estamos preparados para dibujar una formidable línea roja con sombra verde:

[singlepic id=54 w=366 h=219 float=center]

Este sería el código, pero es recomendable tratar de hacerlo uno mismo antes de verlo:

  • <!DOCTYPE html>
  • <html>
  • <head>
  • <meta charset="utf-8">
  • <title>canvas - líneas </title>
  • <style type="text/css">
  • #mi_lienzo {
  • border: 1px solid #000;
  • margin-left: 100px;
  • }
  • </style>
  • </head>
  • <body>
  • <canvas id="mi_lienzo" width="350" height="200"></canvas>
  • <script>
  • var mi_canvas = document.getElementById('mi_lienzo');
  • var mi_contexto = mi_canvas.getContext('2d');
  • mi_contexto.beginPath();
  • mi_contexto.moveTo(10,10);
  • mi_contexto.lineTo(300,150);
  • mi_contexto.lineWidth="5";
  • mi_contexto.lineCap="round";
  • mi_contexto.shadowColor="#060";
  • mi_contexto.shadowBlur="10";
  • mi_contexto.shadowOffsetX="20";
  • mi_contexto.shadowOffsetY="20";
  • mi_contexto.strokeStyle="#900";
  • mi_contexto.stroke();
  • </script>
  • </body>
  • </html>

Continuamos otro día que de lo contrario me quedan unos toxo-post indigeribles... abrazos y feliz año nuevo.

|| Tags: ,

valoración de los lectores sobre Introducción al API de canvas (1)

  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración negativa
  • 3.6 sobre 5 (5 votos)

¿Te ha parecido útil o interesante esta entrada?
dormido, valoración 1 nadapensativo, valoración 2 un poco sonrisa, valoración 3 a medias guiño, valoración 4 bastante aplauso, valoración 5 mucho

Tú opinión es muy importante, gracias por compartirla!

Los comentarios están cerrados.