dibujo en un elemento canvas de HTML 5 con el API de canvas

En el siguiente tutorial podemos pasar a ver un primer ejemplo de utilización del mismo para que los lectores de DesarrolloWeb.com puedan ir conociendo este nuevo sistema.

Para comenzar realizaremos un ejemplo de dibujo de dos rectángulos con distintos colores, que realizaremos utilizando el un par de funciones del API de dibujo en canvas mediante Javascript. Claro que el elemento canvas tiene muchas cosas que debemos conocer para ir soltándonos en su manejo, pero al menos podremos ver una primera prueba para ir abriendo boca.

El ejemplo se basa en dos partes, primero una en la que colocaremos un lienzo canvas en un lugar de nuestra página, con la etiqueta HTML "CANVAS" y luego otra parte en la que dibujaremos dentro de ese elemento los rectángulos con programación Javascript. Sobra decir que harán falta unos conocimientos al menos básicos de Javascript para poder trabajar con el canvas.

Colocar el elemento HTML canvas

Ahora comencemos situando dentro del cuerpo de la página la etiqueta CANVAS. Esta etiqueta, como decíamos forma parte del estándar del HTML 5.

<canvas id="micanvas" width="200" height="100">
Este texto se muestra para los navegadores no compatibles con canvas.
<br>
Por favor, utiliza Firefox, Chrome, Safari u Opera.
</canvas>

El elemento tiene apertura y cierre y entre medias podemos escribir un texto que será lo que vean los usuarios que entren con navegadores que no soporten la etiqueta CANVAS.

Para especificar las características de este canvas tenemos varios atributos:

Atributo id: 

Para asignarle un nombre único y luego referirnos a este canvas desde Javascript.

Atributos width y height: 

Para indicar la anchura y altura del área del canvas.

Otros atributos se pueden colocar de manera opcional, como por ejemplo style, para indicar atributos de hojas de estilo para definir el aspecto del lienzo.

Pintar en un canvas mediante Javascript

Existen diversas funciones ya listas para dibujar formas y trazados en un canvas. Nosotros podemos combinarlas para hacer dibujos más complejos. Pero en este caso vamos a empezar dibujando un par de sencillas formas. No obstante, como veremos también, debemos hacer antes unas comprobaciones para saber si el navegador que está ejecutando esta página es compatible con canvas.

Inicialmente el canvas está en blanco y cuando queremos pintar sobre él tenemos que acceder al contexto de renderizado del canvas, sobre el que podremos invocar distintos métodos para acceder a las funciones de dibujo. El proceso simplificado sería el siguiente:

//Recibimos el elemento canvas
var canvas = document.getElementById('micanvas');

//Accedo al contexto de '2d' de este canvas, necesario para dibujar
var contexto = canvas.getContext('2d');

//Dibujo en el contexto del canvas
contexto.fillRect(50, 0, 10, 150);

Primero con el método getElementById() obtengo el elemento de la página que se pasa como parámetro, que es el canvas. Luego accedo al contexto 2D del canvas, que es el que tiene varios métodos que sirven para dibujar en el lienzo. Por último puedo ejecutar tantos métodos como desee sobre el contexto del canvas para pintar elementos en el lienzo.

Como decía, estas sentencias Javascript no son compatibles con todos los navegadores, por lo que habrá que hacer unas comprobaciones básicas, para saber si ejecutar o no las distintas instrucciones de dibujo.Veamos este código, un poco más elaborado, que hace las comprobaciones necesarias para no hacer nada en el caso que el navegador no sea compatible con canvas.

//Recibimos el elemento canvas
var elemento = document.getElementById('micanvas');
//Comprobación sobre si encontramos un elemento
//y podemos extraer su contexto con getContext(), que indica compatibilidad con canvas
if (elemento && elemento.getContext) {
   //Accedo al contexto de '2d' de este canvas, necesario para dibujar
   var contexto = elemento.getContext('2d');
   if (contexto) {
      //Si tengo el contexto 2d es que todo ha ido bien y puedo empezar a dibujar 
      //Comienzo dibujando un rectángulo
      contexto.fillRect(0, 0, 150, 100);
      //cambio el color de estilo de dibujo a rojo
      contexto.fillStyle = '#cc0000';
      //dibujo otro rectángulo
      contexto.fillRect(10, 10, 100, 70);
   }
}

El código está comentado para que se pueda entender más fácilmente.

Ahora sólo falta una última cosa, que es ejecutar estas acciones sólo cuando la página esté cargada por completo y lista para recibirlas. Esto lo conseguimos con la el evento onload del body de la página:

<body onload="funcionDeDibujo()">

Claro que tendremos que crear la funcionDeDibujo() con el código anterior para operar con el canvas.

O bien podemos utilizar este otro recurso para asignar el evento directamente desde un script Javascript:

window.onload = function(){
   //instrucciones de dibujo en canvas
}

El código completo de nuestro primer ejemplo de uso de canvas sería el siguiente:

<html>
<head>
   <title>Probando canvas</title>
<script>
window.onload = function(){
   //Recibimos el elemento canvas
   var elemento = document.getElementById('micanvas');
   //Comprobación sobre si encontramos un elemento
   //y podemos extraer su contexto con getContext(), que indica compatibilidad con canvas
   if (elemento && elemento.getContext) {
      //Accedo al contexto de '2d' de este canvas, necesario para dibujar
      var contexto = elemento.getContext('2d');
      if (contexto) {
         //Si tengo el contexto 2d es que todo ha ido bien y puedo empezar a dibujar en el canvas
         //Comienzo dibujando un rectángulo
         contexto.fillRect(0, 0, 150, 100);
         //cambio el color de estilo de dibujo a rojo
         contexto.fillStyle = '#cc0000';
         //dibujo otro rectángulo
         contexto.fillRect(10, 10, 100, 70);
      }
   }
}

</script>
</head>

<body>

<canvas id="micanvas" width="200" height="100">
Este texto se muestra para los navegadores no compatibles con canvas.
<br>
Por favor, utiliza Firefox, Chrome, Safari u Opera.
</canvas>

</body>
</html>

Podemos ver el ejemplo en marcha en una página aparte

Fuente:enlace

 

Si quieres seguir aprendiendo con nosotros, puedes ingresar a nuestros 

Cursos y Diplomados de Tecnología Web visita www.uneweb.edu.ve  para más información