CANVAS

CANVAS es una nueva etiqueta del HTML 5, permite dibujar en dicha área mediante JavaScript. El objetivo de este elemento es hacer gráficos en el cliente (navegador), juegos etc. Para hacer un uso efectivo de este nuevo elemento de HTML tenemos que manejar el JavaScript.

La especificación completa del estándar de Canvas puede visitarla en este sitio.

La estructura de un programa que accede al canvas es:

<html>
<!DOCTYPE HTML>
<head>
  <title>Título de la página</title>  
  <meta charset="UTF-8">

<script type="text/javascript">

function retornarLienzo(x)
{
   var canvas = document.getElementById(x);
   if (canvas.getContext) 
   {
     var lienzo = canvas.getContext("2d");   
     return lienzo;
   }
   else
     return false;
}

function dibujar()
{
   var lienzo=retornarLienzo("lienzo1");
   if (lienzo)
   { 
     lienzo.fillStyle = "rgb(200,0,0)";
     lienzo.fillRect (10, 10, 100, 100);
   }
}
</script>
</head>
<body onLoad="dibujar()">
<canvas id="lienzo1" width="300" height="200">
Su navegador no permite utilizar canvas.
</canvas>
</body>
</html>

La primer función que implementaremos y será de uso común en todos los problemas es la que retorna la referencia al objeto que nos permite dibujar en el canvas:

function retornarLienzo(x)
{
   var canvas = document.getElementById(x);
   if (canvas.getContext) 
   {
     var lienzo = canvas.getContext("2d");   
     return lienzo;
   }
   else
     return false;
}

La función recibe el "id" que hemos especificado en el elemento canvas dispuesto en la página (en este ejemplo le llamamos lienzo1):

<canvas id="lienzo1" width="300" height="200">
Su navegador no permite utilizar canvas.
</canvas>

En caso que el navegador no implemente la especificación del elemento canvas produce un falso el if (lo que estamos haciendo en este if es comprobar si existe la función getContext, en caso afirmativo el navegador soporta canvas):

   if (canvas.getContext)

En caso de implementar el canvas obtenemos una referencia del mismo llamando a la función getContext y pasando como parámetro un string con el valor "2d":

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

La función dibujar es la que se ejecuta luego que se carga la página en el navegador:

function dibujar()
{
   var lienzo=retornarLienzo("lienzo1");
   if (lienzo)
   { 
     lienzo.fillStyle = "rgb(200,0,0)";
     lienzo.fillRect (10, 10, 100, 100);
   }
}

En esta función llamamos a la anterior "retornarLienzo("lienzo1") pasando como parámetro el id del canvas respectivo. En caso que la función retorne la referencia al lienzo el if se verificará como verdadero y estaremos en condiciones de comenzar a dibujar en el mismo:

   var lienzo=retornarLienzo("lienzo1");
   if (lienzo)

Mediante la variable lienzo podemos acceder a un conjunto de funciones y propiedades disponibles para dibujar. En nuestro ejemplo:

     lienzo.fillStyle = "rgb(200,0,0)";
     lienzo.fillRect (10, 10, 100, 100);

Activamos como color de relleno de figura el rojo (200,0,0) y seguidamente llamamos a la función fillRect que dibuja un rectángulo desde la posición (10,10) con ancho de 100 píxeles y un alto de 100 píxeles. La coordenada (0,0) se encuentra en la parte superior izquierda.

Temario del Tutorial->3 - CANVAS

Retornar