Micaela 30 de Septiembre de 2009 a las 09.02
   Imprimir artículo
elWebmaster.com

HTML5: Dibuja utilizando el tag Canvas y Javascript


html5-draganddropEntre la serie de ventajas que incluyen las especificaciones HTML5 se encuentra Canvas, que es una forma de dibujar de manera programada mediante Javascript.

En esta nota exploraremos las cosas buenas y malas de Canvas, demostrando lo que es posible lograr gracias a este recurso mediante ejemplos y links.

¬ŅPor qu√© necesitas Canvas?

Canvas puede ser utilizado para representar algo visualmente en tu navegador. Por ejemplo:

  • Diagramas simples
  • Interfaces de usuario elegantes
  • Animaciones
  • Gr√°ficos y tablas
  • Aplicaciones de dibujo embebidas
  • Trabajar sobre las limitaciones del CSS

En términos básicos es un API de dibujo basada en pixeles, pero utilizada de la forma correcta puede volverse el bloque constructor de cosas muy interesantes.

¬ŅQu√© herramientas pone a tu disposici√≥n?

Herramientas de dibujo

  • Rect√°ngulos
  • Arcos
  • Rutas y l√≠neas de dibujo
  • Curvas Bezier y cuadr√°ticas

Efectos

  • Rellenos y trazos
  • Sombras
  • Gradientes lineales y radiales
  • Transparencia Alpha
  • Composici√≥n

Transformaciones

  • Escalamiento
  • Rotaci√≥n
  • Traducci√≥n
  • Matriz de transformaci√≥n

Extrayendo e incorporando información

  • Carga externa de im√°genes mediante URL, otros canvas o informaci√≥n URL
  • Recuperaci√≥n de una representaci√≥n de PNG del canvas actual como un conjunto de datos URL

Comenzando

Para usar Canvas, necesitar√°s dos cosas:

  1. Una etiqueta Canvas en el HTML para colocar el canvas dibujante
  2. JavaScript para realizar los dibujos

La etiqueta Canvas es b√°sicamente una etiqueta img sin ning√ļn tipo de datos. Puedes especificar una anchura y una altura para el √°rea de dibujo. En lugar de un atributo "alt", puedes incluir HTML en la etiqueta Canvas propia para contenido alternativo.

Ejemplo de una etiqueta Canvas:

  1. <canvas id="myDrawing" width="200" height="200">
  2. <p>Your browser doesn't support canvas.</p>
  3. </canvas>

Con un elemento Canvas en el HTML, a√Īadiremos el JavaScript. Necesitamos referencias el elemento Canvas, por lo que debes asegurarte que el navegador sea compatible con Canvas. Luego, crea un contexto de dibujo:

  1. var drawingCanvas = document.getElementById('myDrawing');
  2.  
  3. // Check the element is in the DOM and the browser supports canvas
  4. if(drawingCanvas.getContext) {
  5.     // Initaliase a 2-dimensional drawing context
  6.     var context = drawingCanvas.getContext('2d');
  7.  
  8.     //Canvas commands go here
  9.  
  10. }

Controlando el método getContext() en un objeto DOM canvas es la forma estándar de determinar la compatibilidad canvas.

La variable del contexto ahora referencia a un contexto canvas sobre el cual se puede dibujar.

Dibujo B√°sico

Por lo tanto, vamos a empezar con un ejemplo para demostrar los conceptos b√°sicos. Vamos a dibujar una cara sonriente.

Si pensamos en la cara como un conjunto de formas b√°sicas, tenemos:

1. Un círculo, con un trazo negro y relleno amarillo para cubrir la cara.
2. 2 círculos con un trazo negro y relleno blanco y con un círculo interno lleno de verde para los ojos.
3. Una curva  para la sonrisa.
4. Un diamante para la nariz.

Comencemos por la creación de la cara redonda:

  1. // Create the yellow face
  2. context.strokeStyle = "#000000";
  3. context.fillStyle = "#FFFF00";
  4. context.beginPath();
  5. context.arc(100,100,50,0,Math.PI*2,true);
  6. context.closePath();
  7. context.stroke();
  8. context.fill();

Se puede ver de lo anterior que empezamos por definir algunos colores para el contorno y relleno, luego se crea un c√≠rculo (un arco con un radio de 50 y se gira a trav√©s de los √°ngulos de 0 a 2 * pi radianes). Por √ļltimo, se aplica el contorno y relleno que se ha definido previamente.

Este proceso de creación de estilos, llegando a las coordenadas y las dimensiones y, finalmente, la aplicación de un relleno o el trazo se encuentra en el corazón del dibujo Canvas. Cuando se suman los otros elementos de la cara, tenemos:

114

Descarga el código fuente completo del ejemplo de la "carita feliz"

Efectos y Transformaciones

Veamos cómo podemos manipular una imagen Canvas existente. Podemos cargar imágenes externas utilizando el método drawImage():

  1. context.drawImage(imgObj, XPos, YPos, Width, Height);

Esta es la imagen con la que vamos a jugar:

214

Le vamos a dar a la imagen un marco rojo. Para esto usaremos un rect√°ngulo y lo rellenaremos con una gradiente radial para darle un poco de textura.

  1. //Create a radial gradient.
  2. var gradient = context.createRadialGradient(90,63,30,90,63,90);
  3. gradient.addColorStop(0, '#FF0000');
  4. gradient.addColorStop(1, '#660000');
  5.  
  6. //Create radial gradient box for picture frame;
  7. context.fillStyle = gradient;
  8. context.fillRect(15,0,160,140);
  9.  
  10. //Load the image object in JS, then apply to canvas onload
  11. var myImage = new Image();
  12. myImage.onload = function() {
  13. context.drawImage(myImage, 30, 15, 130, 110);
  14. }
  15. myImage.src = "cocktail.jpg";

Para hacer lucir a nuestro portarretrato como que est√° colgado en una pared, a√Īadiremos drop shadow y rotaremos la imagen levemente para que tenga un peque√Īo √°ngulo.

Un drop shadow deber√° ser aplicado al marco:

  1. //Create a drop shadow
  2. context.shadowOffsetX = 10;
  3. context.shadowOffsetY = 10;
  4. context.shadowBlur = 10;
  5. context.shadowColor = "black";

36

Para rotar el canvas, utilizamos el m√©todo rotate() el cual toma un valor en radianes para hacer que el canvas se rote. Esto s√≥lo aplica la rotaci√≥n para los dibujos subsiguientes del canvas, as√≠ que aseg√ļrate de ponerlo en el lugar correcto del c√≥digo.

  1. //Rotate picture
  2. context.rotate(0.05);

Así es cómo luce el marco terminado:

42

Descarga el código fuente completo del ejemplo del portarretrato

Animación y Física

Los dibujos Canvas pueden ser animados mediante la re-dibujación repetida del canvas con diferentes dimensiones, posiciones y otros valores. Con el uso de la lógica Javascript, también puedes aplicar la física a tus objetos canvas.

Ejemplos de implementaciones:

* Pelotas rebotantes por Efeion ¬Ľ

* js-fireworks por Kenneth Kufluk ¬Ľ

* Utilizando canvas en conjunto con el elemento de audio HTML 5 y Twitter ¬Ľ

Mostrando Fuentes Elegantes

Canvas puede ser utilizado como una forma de mostrar fuentes no-est√°ndar en una p√°gina web como una alternativa a tecnolog√≠as como sIFR. El proyecto Cufon es una aplicaci√≥n de este tipo. Los reemplazos de fuentes basados en Canvas como Cufon tienen ventajas sobre sIFR, en que hay menos gastos de recursos y no es necesario ning√ļn plug-in, sin embargo hay algunas desventajas:

  • Se genera un mont√≥n de c√≥digo
  • Las fuentes son incorporadas, por lo que rompe los t√©rminos de licencia de muchas fuentes
  • El texto no puede ser seleccionado

Las fuentes necesitan ser convertidas para su uso en Cufon utilizando las herramientas de la p√°gina principal de Cufon.

Dejando que tus usuarios hagan los dibujos

JavaScript puede interactuar con eventos de mouse y teclado, por lo que puedes crear aplicaciones de inserción de dibujos con canvas, como demuestran los ejemplos a continuación:

* Esquemas de poco peso con Tiny Doodle por Andrew Mason

* Un clon de MS paint en canvas por Christopher Clay

Compensando las deficiencias CSS del navegador

¬ŅNo puedes esperar el soporte CSS3 y deseas a√Īadir esquinas redondeadas, degradados o la opacidad, sin crear una gran cantidad de im√°genes? Proyectos como el de jqcanvas a√Īaden etiquetas canvas detr√°s de los elementos est√°ndar de HTML para agregar dise√Īo en tu p√°gina web.

Soporte del navegador

Las √ļltimas versiones de Firefox, Safari, Chrome y Opera todas disfrutan de un soporte razonable para Canvas.

¬ŅQu√© pasa con Internet Explorer?

IE no soporta Canvas de forma nativa (como así tampoco IE8), sin embargo se han dado algunas compatibilidades gracias al proyecto ExplorerCanvas. Simplemente es necesario incluir un archivo Javascript extra antes de cualquier código canvas en tu página. Lo puedes esconder de otros navegadores de la forma estándar, utilizando comentarios condicionales.

  1. <!--[if IE]><script src="excanvas.js"></script><![endif]-->

ExplorerCanvas incluso extiende el soporte canvas a IE6, sin embargo no es perfecto por lo que no esperes que tenga un rendimiento tan bueno como en los navegadores modernos que soportan canvas de forma natural.

Accesibilidad

Lienzo no es actualmente considerada como accesible ya que no hay código generado o una API para que el contenido textual sea leído. El Fallback HTML se puede agregar manualmente dentro de la etiqueta canvas, pero esto nunca será suficiente para representar al canvas de una manera accesible.

En Pensando en la Accesibilidad Canvas de HTML5 Steve Faulkner, explica los problemas con más detalle. Existe ahora un consenso general de que la accesibilidad debe ser abordada lo que ha llevado a los protocolos y formatos del Grupo de Trabajo del W3C reciente a la apertura de un debate en propuestas para la adición de la accesibilidad para Canvas con el aporte de los demás.

En Resumen

A pesar de que Canvas a√Īade caracter√≠sticas a la p√°gina, no creo que haya sido bien pensado del todo. En mucha cosas se siente como un paso atr√°s y representa una forma bastante "a la antigua" de dibujo que es inferior al est√°ndar moderno SVG basado en XML. Est√° basado en pixeles, en oposici√≥n a los lindos vectores de SVG y dibujar con √©l implica escribir una gran cantidad de Javascript inmanejable. La falta de accesibilidad es tambi√©n un gran problema.

Sin embargo, lo que Canvas tiene a su favor, que SVG no, es que puede integrarse con nuestras páginas web existentes de forma muy sencilla. También podemos trabajar con canvas de una forma casi igual a la que trabajamos con nuestras páginas web.

Al ver los ejemplos de este artículo, podemos obtener una idea bastante buena de la gran cantidad de situaciones en la que Canvas puede ser implementado. Aunque la sintaxis puede ser frustrante, Canvas nos brinda una tecnología de dibujo que podemos utilizar de inmediato para mejorar nuestras páginas.

Fuente: Carsonified


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (9)

  1. Bobert dice:

    Menudo dolor de cabeza... alabado sea Photoshop!

  2. Alvaro Justo Michel Barrera dice:

    Gracias al aporte de nuestro queridisimo Google, ya es real en IE6-8, en este enlace esta el proyecto con su especificacion: http://excanvas.sourceforge.net/ , y me consta que funciona, por que me toco hacer un editor del lado del cliente por que las que hay en flash son mucha ciencia para mi, y la verdad soy amante de JavaScript.

  3. Luis dice:

    En http://ktulu.com.ar/sand/ hay un demo que hice para probar el canvas y en http://github.com/luisparravicini/ejemplo-canvas tienen el codigo fuente del demo.

  4. Robert dice:

    Excelente artículo, lastima que internet explorer inclusive la version 8 no soporta "Canvas", salvo a partir de los ultimos betas. No asi Firefox que es mas actualizable. Pero dicen que existe otra alternativa a Canvas, el explorercanvas, es algo pesado, lento pero dicen que funciona y es mas recomendable por mejor compatibilidad.

  5. hector manuel diaz saavedra dice:

    no pss esta chido eso me gusta asi poder hacer mis paginas bn jejeje xD xD

  6. francisco javier dice:

    jaja k padrisimo me gusta esososos jejejejeje asi debe ser pa no pedirle nada a flash

  7. rimboe dice:

    Hola buenas,

    Os recomiendo http://www.foroshtml5.com para todos los que quer√°is aprender y saber m√°s sobre HTML.

    Estan creando una comunidad de habla hispana sobre el tema, es un foro joven que pinta muy bien.

    Saludos!

  8. reyquery dice:

    Buenos criterios ofrece canvas , pero lo combinare con jquery y sera poderoso...

  9. Carlos dice:

    Muy bueno me a gustado

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Iniciar sesión