contenido 30 de junio de 2014 a las 07.32
   Imprimir artículo
elWebmaster.com

HTML5: Introducción a Canvas


html5logowideUno de los instrumentos más importantes en la caja de herramientas de un pintor es su lienzo. Esto le da la libertad para expresar todo tipo de sentimientos, impresiones, ideas, y así sucesivamente, en variaciones y combinaciones casi ilimitadas. Y esa libertad puede ser restringida sólo por dos cosas: su nivel de habilidad y de su imaginación.

La situación en el mundo del desarrollo web es similar. Con el progreso continuo de HTML5 y sus potentes especificaciones, los desarrolladores web han adquirido la capacidad de hacer cosas que eran imposibles en el pasado. Dibujo de gráficos y la creación de animaciones directamente en el navegador es ahora completamente posible gracias a una tecnología llamada HTML5 Canvas.

¬ŅQu√© es HTML5 Canvas?

El elemento canvas es un elemento definido en el código HTML con los atributos de anchura y altura. El verdadero poder del elemento canvas se lleva a cabo aprovechando la API de HTML5 Canvas. Esta API se utiliza al escribir JavaScript, el cual, puede acceder a la zona del canvas a través de un conjunto completo de funciones de dibujo, permitiendo así generar dinámicamente los gráficos.

¬ŅQu√© es lo mejor de HTML5 Canvas?

He aquí algunas razones por las que podrías considerar aprender a usar HTML5 y usarlo en tu web:

  • Interactividad. El canvas es completamente interactivo. Se puede responder a las acciones del usuario escuchando eventos de teclado, rat√≥n o t√°ctiles. Por lo que un desarrollador no est√° restringido s√≥lo a gr√°ficos est√°ticos e im√°genes.
  • Animaci√≥n. Cada objeto dibujado en el canvas puede ser animado. Esto permite que todos los niveles de las animaciones que se creen, desde simples pelotas de rebote a complejos movimientos cinem√°ticos.
  • Flexibilidad. Los desarrolladores pueden crear casi cualquier cosa mediante el canvas. Puede mostrar l√≠neas, formas, texto, im√°genes, etc., con o sin animaci√≥n. Adem√°s, la adici√≥n de v√≠deo y/o audio a una aplicaci√≥n en el canvas tambi√©n es posible.
  • Soporte del navegador/plataforma. HTML5 Canvas es compatible con todos los principales navegadores y se puede acceder a una amplia gama de dispositivos, incluyendo computadoras de escritorio, tabletas y tel√©fonos inteligentes.
  • Popularidad. La popularidad del canvas es de r√°pido y constante crecimiento por lo que no hay escasez de los recursos disponibles.
  • Es un est√°ndar web. A diferencia de Flash y Silverlight, Canvas es una tecnolog√≠a abierta que es parte de HTML5. Y aunque no todas sus caracter√≠sticas se implementan en todos los navegadores, los desarrolladores pueden estar seguros de que el canvas estar√° por mucho tiempo.
  • Desarrolla una vez, ejecuta en todas partes. HTML5 Canvas ofrece una gran portabilidad. Una vez creada, a diferencia de Flash y Silverlight, una aplicaci√≥n en el canvas se puede ejecutar en casi cualquier lugar, desde los equipos m√°s grandes hasta los dispositivos m√≥viles m√°s peque√Īos.
  • Herramientas gratuitas y accesibles de desarrollo. Las herramientas b√°sicas para la creaci√≥n de aplicaciones de canvas en HTML5 son s√≥lo un navegador y un buen editor de c√≥digo. Adem√°s, hay muchas bibliotecas y herramientas para ayudar a los desarrolladores con el desarrollo.

¬ŅQu√© aplicaciones se pueden crear con HTML5 Canvas?

Ok, el canvas es muy bueno. Pero, ¬Ņpara qu√© se puede utilizar? Vamos a ver.

  • Juegos. El conjunto de caracter√≠sticas de HTML5 Canvas es un candidato ideal para la producci√≥n de todo tipo de juegos en 2D y 3D.
  • Publicidad. HTML5 Canvas es un gran sustituto para los banners y los anuncios basados ‚Äč‚Äčen Flash. Tiene todas las caracter√≠sticas necesarias para atraer la atenci√≥n de los compradores.
  • Representaci√≥n de Datos. HTML5 puede recoger datos de fuentes de datos globales y usarlo para generar gr√°ficos visualmente atractivos e interactivos y tablas con el elemento canvas.
  • Educaci√≥n y Formaci√≥n. Canvas de HTML5 se pueden utilizar para producir experiencias de aprendizaje eficaces y atractivos, la combinaci√≥n de texto, im√°genes, videos y audio.
  • Arte y Decoraci√≥n. Con un poco de imaginaci√≥n y una amplia variedad de tela de colores, gradientes, patrones, transparencia, sombras y caracter√≠sticas de recorte, todo tipo de gr√°ficos art√≠sticos y decorativos se pueden extraer .

Ahora que sabemos por qué debemos aprender HTML5 canvas, echemos un vistazo a los elementos básicos y cómo empezar a usarlo.

Canvas renderizando contextos

Cada elemento canvas HTML5 debe tener un contexto. El contexto define la API Canvas de HTML5 que vas a utilizar. El contexto 2d se utiliza para la elaboraci√≥n de gr√°ficos 2D y manipulaci√≥n de im√°genes de mapa de bits. El contexto 3D se utiliza para la creaci√≥n de gr√°ficos en 3D y su manipulaci√≥n. Este √ļltimo se llama en realidad WebGL y est√° basado en OpenGL ES.

Primeros pasos

Para comenzar con el canvas, lo √ļnico que necesitas es un editor de c√≥digo y un navegador con soporte HTML5 canvas. Yo utilizo Notepad++ y Google Chrome, pero se puede usar lo que quieras.

Nuestro HTML para empezar se verá así:

<canvas id=”exampleCanvas” width=”500″ height=”300″>

<!– OPTION 1: deja un mensaje aqu√≠ si tu navegador no soporta el canvas –>

<p>Tu navegador actualmente no soporta HTML5 Canvas.

Chequea caniuse.com/#feat=canvas para información del soporte de canvas en el navegador.</p>

<!– OPTION 2: coloca otro contenido (texto, im√°genes, Flash, etc.)

Si el navegador no soporta canvas –>

</canvas>

Y aquí está nuestro JavaScript, en el cual podemos incluir en el botón de la página HTML:

var canvas = document.getElementById(‘exampleCanvas’),

context = canvas.getContext(‘2d’);

// los c√≥digos de ejemplo continuar√°n aqu√≠…

Por defecto, el navegador crea elementos de canvas con un ancho de 300 p√≠xeles y una altura de 150 p√≠xeles, aunque no est√©n especificados en el c√≥digo HTML. Tu puedes cambiar el tama√Īo especificando (el ancho y la altura), como est√° hecho en el c√≥digo HTML.

Nota tambi√©n que hemos dado al canvas un atributo id que vamos a utilizar en nuestro JavaScript. Y, por √ļltimo ,si lo deseas, puedes utilizar CSS para agregar un borde para hacer visible el canvas por medio de una l√≠nea delgada. Aunque esto no es necesario, porque se utiliza como una ayuda visual para nosotros ver los l√≠mites del elemento canvas nada m√°s.

Nótese que entre la apertura y cierre de etiquetas <canvas>, se ha agregado el contenido que se mostrará si el navegador no soporta el canvas. Esto puede ser casi cualquier tipo de contenido que es compatible con un navegador antiguo.

El JavaScript comienza con dos líneas. En la primera línea se crea una variable que almacena en caché el elemento canvas a través de su ID. La segunda línea crea una variable (contexto) que hace referencia al contexto 2D para el canvas utilizando la función getContext(). Vamos a utilizar la variable de contexto para acceder a todas las funciones y propiedades de dibujo canvas.

Con nuestro canvas listo podemos empezar a experimentar con la API Canvas. Pero antes de eso, vamos a aclarar unos cuantos aspectos de la función de canvas.

Tama√Īo de elemento vs. Tama√Īo de la superficie de dibujo

Adem√°s de los atributos de anchura y altura del elemento canvas, tambi√©n se puede utilizar CSS para definir el tama√Īo de un elemento canvas. Sin embargo, el tama√Īo de un elemento canvas con CSS no es el mismo que para ajustar el ancho del elemento y los atributos de altura. Esto se debe a que el canvas en realidad tiene dos tama√Īos: el tama√Īo del elemento en s√≠ y el tama√Īo de la superficie de dibujo del elemento.

Cuando se establecen los atributos width y height del elemento, se establece tanto el tama√Īo del elemento como el tama√Īo de la superficie de dibujo del elemento; sin embargo, cuando se utiliza CSS para el tama√Īo de un elemento canvas, s√≥lo se ha establecido el tama√Īo del elemento y no la superficie de dibujo. Cuando el tama√Īo del elemento no coincide con el tama√Īo de su superficie de dibujo, el navegador escala la superficie de dibujo para encajar con el elemento.

Debido a esto, es una buena idea utilizar los atributos width y height del elemento, en lugar de utilizar CSS.

Sistema de Coordenadas

En un espacio 2D, las posiciones se referencian utilizando coordenadas X e Y. El eje X se extiende horizontalmente, y el eje Y se extiende verticalmente. El centro tiene una posición x = 0 e y = 0, que también se puede expresar como (0,0). Este método de posicionamiento de objetos, que se utiliza en las matemáticas, se conoce como el sistema de coordenadas cartesiano.

El sistema de coordenadas del canvas, sin embargo, coloca el origen en la esquina superior izquierda del lienzo, con las coordenadas X aumentando hacia la derecha y las coordenadas en Y creciente hacia la parte inferior del lienzo. Así que a diferencia de un estándar de espacio de coordenadas cartesianas, el espacio del canvas no tiene puntos negativos visibles. Usando coordenadas negativas no hará que su aplicación falle, pero los objetos colocados utilizando puntos de coordenadas negativas no aparecerá en la página.

Ejemplos b√°sicos de canvas

Como se mencionó, HTML5 Canvas te permite crear muchos tipos de objetos, líneas, curvas, caminos, formas, texto, etc. En los ejemplos a seguir se puede ver cómo algunos de estos objetos son realmente delineados. No se va a entrar en gran detalle sobre la API de Canvas; estos son sólo algunos fáciles para ayudarte a tener una idea de cómo funciona el canvas.

Dibujar líneas

Para dibujar una línea, se utilizan cuatro métodos de la API. Empezamos con el método beginPath() que indica al navegador que se prepare para dibujar un nuevo camino. A continuación, se utiliza el método moveTo(x,y) para establecer el punto de partida de la línea. Entonces método lineTo(x,y) establece el punto final y dibuja la línea mediante la conexión de los dos puntos.

En este punto se traza la línea, pero sigue siendo invisible. Para hacerla visible usamos el método stroke() para mostrar la línea con el color negro por defecto.

Ejemplo:

context.beginPath();

context.moveTo(50, 50);

context.lineTo(250, 150);

context.stroke();


Dibujar rect√°ngulo

Para dibujar un rectángulo, podemos utilizar el método fillRect(x, y, width, height) para colocar las coordenadas y la dimensión, junto con la propiedad fillStyle para configurar el color de relleno.

Ejemplo:

context.fillStyle = ‘yellow’;

context.fillRect(50, 50, 200, 100);

Dibujar texto

Para dibujar texto en canvas, podemos utilizar el fillText(string, x, y) junto con la propiedad del font para configurar la letra, tama√Īo, y estilo del texto (similar al font en CSS).

Ejemplo:

context.font = ‘italic 40pt Calibri, sans-serif’;

context.fillText(‘Hello World!’, 50, 50);

Debes tener en cuenta que, aunque un simple dibujo con la API de HTML5 Canvas es f√°cil, la creaci√≥n de formas complejas y animaciones requiere algunos conocimientos de Matem√°ticas y F√≠sica. Uno de los mejores libros sobre este tema es “Foundation HTML5 Animation with JavaScript”. Este libro es un gran recurso para aprender a mover las cosas, de lo simple a animaciones complejas.

Fuente original del artículo: Sitepoint
Traducción realizada por
elWebmaster.com


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

Deja tu opinión

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