martes, 9 de septiembre de 2014

HTML5 - Canvas Usos Básicos

Posted by daycry at 11:34 Labels: ,

Comenzamos este tutorial observando al elemento  <canvas> en si mismo.
<canvas id="tutorial" width="150" height="150"></canvas>

Observamos un gran parecido al elemento <img>, con la sola diferencia que este no tiene los atributos src y alt. El elemento <canvas> tiene solo dos atributos - width y height. Estos son ambos opcionales y pueden tambien ser puestos usando propiedades DOM. Cuando los atributos ancho y alto no estan especificados, el lienzo se inicializara por 300 pixels ancho y 150 pixels de alto. El elemento puede ser arbitrariamente redimensionado por CSS, pero durante el renderizado la imagen es escalada para ajustarse a el tamaño de su layout.

Nota: Si su renderizado se ve distorcionado, prueba especificar los atributos width y height explicitamente como <canvas> atributos, y no usando CSS.

El atributo id no esta especificado para el elemento  <canvas> pero es una de los atributos por defecto en HTML el cual puede ser aplicado a (almost) cada elemento HTML (parecido a class para instancias). Es siempre una buena idea suministrar un id porque esto hace mucho mas facil identificarlo en nuestro script.

El elemento <canvas> puede ser puesto un estilo como a cualquier imagen normal (margin, border, background, etc). Estas reglas, sin embargo, no afectan a lo dibujado sobre el lienzo (canvas). Nosotros veremos como se hace esto luego en este tutorial. Cuando no tenemos aplicadas reglas de estilo a el lienzo (canvas) este inicialmente sera completamente transparente.

Contenido de reserva

Desde algunos navegadores viejos (en particular, las versiones anteriores a la version 9 de Internet Explorer) no soportan el elemento <canvas>, y deberás proveer contenido de reserva para ser mostrado por esos navegadores.

Este es muy explicito: Nosotros debemos proveer contenido alternativo al que tiene el elemento <canvas> dentro. Navegadores que no soportan <canvas> ignoraran el contenedor y regresara el contenido indicado dentro de este. Navegadores que soporten <canvas> ignoraran el contenido en su interior (de las etiquetas), y solo renderizaran el canvas normalmente.

Por ejemplo, Nosotros podremos proveer un texto descriptivo del contenido del canvas o proveer una imagen estatica del contenido rederizado. Este puede verse algo como esto:
<canvas id="stockGraph" width="150" height="150">
  current stock price: $3.15 +0.15
</canvas>

<canvas id="clock" width="150" height="150">
  <img src="images/clock.png" width="150" height="150" alt=""/>
</canvas>

El contexto de renderizacion

<canvas> crea un lienzo de dibujo fijado que expone uno o mas contextos renderizados, los cuales son usados para crear y manipular el contenido mostrado. Nos enfocaremos en renderizacion de contextos 2D. Otros contextos deberan proveer diferentes tipos de renderizaciones; por ejemplo, WebGL usa un 3D contexto ("experimental-webgl") basado sobre OpenGL ES.

El canvas esta inicialmente en blanco. Para mostrar alguna cosa, un script primero necesita acceder al contexto a renderizar y dibujar sobre este. El elemento  <canvas> tiene un method llamado  getContext(), usado para obtener el contexto a renderizar y sus funciones de dibujo. getContext() toma un parametro, el tipo de contexto. Para graficos 2D, como los que cubre este tutorial, su especificacion es "2d".
var canvas = document.getElementById('tutorial');
var ctx = canvas.getContext('2d');

La primera linea regresa el nodo DOM para el elemento <canvas> llamando al metodo document.getElementById(). Una vez tu tienes el elemento nodo, tu puedes acceder al contexto de dibujo usando su metodo getContext().

Comprobando soporte

El contenido de regreso que es mostrado en navegadores los cuales no soportan <canvas>. Para los Scripts puede tambien comprobarse su soporte desde la programacion por un simple test para la presencia del metodo getContext(). Con un trozo de codigo parecido al que viene debajo:
var canvas = document.getElementById('tutorial');

if (canvas.getContext){
  var ctx = canvas.getContext('2d');
  // drawing code here
} else {
  // canvas-unsupported code here
}

Esqueleto de plantilla

Ejemplo de una plantilla mínima, la cual usaremos como punto de partida para posteriores ejemplos.
<html>
  <head>
    <title>Canvas tutorial</title>
    <script type="text/javascript">
      function draw(){
        var canvas = document.getElementById('tutorial');
        if (canvas.getContext){
          var ctx = canvas.getContext('2d');
        }
      }
    </script>
    <style type="text/css">
      canvas { border: 1px solid black; }
    </style>
  </head>
  <body onload="draw();">
    <canvas id="tutorial" width="150" height="150"></canvas>
  </body>
</html>

El script incluye una funcion llamada draw(), la cual es ejecutada una vez finalizada la carga de la pagina; este esta hecho usando el evento load del documento. Esta funcion, o una parecida, podría también ser llamada usando window.setTimeout(), window.setInterval(), o cualquier otro controlador de evento, a lo largo de que la pagina esta siendo cargada la primera vez.

Aquí esta como la plantilla se ve in acción:

Un simple ejemplo

Para comenzar, daremos un vistazo a un simple ejemplo que dibuja dos rectángulos que tiene una intersección, uno de los cuales tiene alpha transparencia. Exploraremos como esto trabaja en mas detalle en posteriores ejemplos.
<html>
 <head>
  <script type="application/javascript">
    function draw() {
      var canvas = document.getElementById("canvas");
      if (canvas.getContext) {
        var ctx = canvas.getContext("2d");

        ctx.fillStyle = "rgb(200,0,0)";
        ctx.fillRect (10, 10, 55, 50);

        ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
        ctx.fillRect (30, 30, 55, 50);
      }
    }
  </script>
 </head>
 <body onload="draw();">
   <canvas id="canvas" width="150" height="150"></canvas>
 </body>
</html>

Este ejemplo se parece a esto:

No hay comentarios :

Publicar un comentario

Suscribirse a: Enviar comentarios ( Atom )