HTML5 incluye un elemento interesante llamado CANVAS. Tiene muchos usos, pero para usarlo, necesita aprender algo de JavaScript, HTML, y aveces CSS.
Esto hace que el elemento CANVAS sea un poco abrumador para muchos diseñadores y, de hecho, la mayoría probablemente ignorará el elemento hasta que existan herramientas confiables para crear animaciones y juegos de CANVAS sin saber JavaScript.
Para qué se utiliza HTML5 Canvas
El elemento HTML5 CANVAS se puede usar para muchas cosas que anteriormente, tenía que usar una aplicación incrustada como Flash para generar:
- Gráficos dinámicos
- Juegos online y offline
- Animaciones
- Video y audio interactivos
De hecho, la razón principal por la que la gente usa el elemento CANVAS es por lo fácil que es convertir una página web simple en una aplicación web dinámica y luego convierta esa aplicación en una aplicación móvil para usar en teléfonos inteligentes y tabletas.
Si tenemos Flash, ¿por qué necesitamos Canvas?
De acuerdo con la Especificación HTML5, el elemento CANVAS es: "... un lienzo de mapa de bits que depende de la resolución, que se puede utilizar para representar gráficos, gráficos de juegos, arte u otras imágenes visuales sobre la marcha".
El elemento CANVAS le permite dibujar gráficos, juegos, arte y otros elementos visuales directamente en la página web en tiempo real.
Puede que estés pensando que ya podemos hacer eso con Flash, pero hay dos diferencias principales entre CANVAS y Flash:
- El elemento CANVAS está incrustado directamente en el HTML. Los scripts que se basan en él están en HTML o en un archivo externo vinculado. Esto significa que el elemento CANVAS es parte del modelo de objetos de documento (DOM).
- Flash es un archivo externo incrustado. Utiliza el elemento EMBED o OBJECT para mostrar y no puede interactuar directamente con los otros elementos HTML. Debido a que el elemento CANVAS es parte del DOM, puede interactuar con el DOM de muchas formas.
- Por ejemplo, puede crear una animación que cambie cuando se interactúe con alguna otra parte de la página, como un elemento de formulario que se está completando. Con Flash, lo máximo que podría hacer sería iniciar el Película flash o animación, pero con CANVAS, puede crear muchos efectos diferentes, incluso agregando el texto del campo del formulario a la animación.
- El elemento CANVAS es compatible de forma nativa con los navegadores web. Para que los usuarios realmente utilicen Flash, su navegador debe tener instalado el complemento. Esto suele ser una molestia para la mayoría de las personas debido a las instalaciones de Flash obsoletas o al hecho de que su sistema operativo simplemente no lo admite.
- Solía ser que todos los navegadores tenían el complemento instalado, pero ese ya no es el caso, y muchos incluso están eliminando el complemento debido a dificultades. Además, ni siquiera está disponible en el popular plataforma iOS.
Canvas es útil incluso si nunca planeó usar Flash
Una de las principales razones por las que el elemento CANVAS es tan confuso es que muchos diseñadores se han acostumbrado a una red completamente estática. Las imágenes pueden estar animadas, pero eso se hace con GIFy, por supuesto, puede incrustar video en páginas, pero nuevamente, es un video estático que simplemente se encuentra en la página y tal vez comience o se detenga debido a la interacción, pero eso es todo.
El elemento CANVAS le permite agregar mucha más interactividad a sus páginas web porque ahora puede controlar los gráficos, las imágenes y el texto de forma dinámica con un lenguaje de programación. El elemento CANVAS le ayuda a convertir imágenes, fotografías, cuadros y gráficos en elementos animados.
Cuándo considerar el uso del elemento Canvas
Su audiencia debe ser su primera consideración al decidir si usar el elemento CANVAS.
Si su audiencia usa principalmente Windows XP e IE 6, 7 u 8, entonces crear una función de lienzo dinámico no tendrá sentido ya que esos navegadores no lo admiten.
Si está creando una aplicación que se usará solo en máquinas con Windows, entonces Flash podría ser su mejor opción. Una aplicación para ser utilizada en computadoras Windows y Mac podría beneficiarse de una aplicación Silverlight.
Sin embargo, si su aplicación necesita visualizarse en dispositivos móviles (tanto Android como iOS), así como en dispositivos modernos computadoras de escritorio (actualizadas a las últimas versiones del navegador), luego usar el elemento CANVAS es una buena opción.
Tenga en cuenta que el uso de este elemento le permite tener opciones de respaldo como imágenes estáticas para navegadores más antiguos que no lo admiten.
Sin embargo, no se recomienda utilizar el lienzo HTML5 para todo. Debería Nunca Úselo para cosas como su logotipo, título o navegación (aunque usarlo para animar una parte de cualquiera de estos estaría bien).
De acuerdo con la especificación, debe usar los elementos que sean más adecuados para lo que está tratando de construir. Por lo tanto, es preferible usar el elemento HEADER junto con imágenes y texto al elemento CANVAS para su encabezado y logotipo.
Además, si está creando un página web o una aplicación que está destinada a ser utilizada en un medio no interactivo como la impresión, debe tener en cuenta que el elemento CANVAS que se ha actualizado dinámicamente puede no imprimirse como esperaba. Es posible que obtenga una impresión del contenido actual o del contenido de respaldo.