Llevo tiempo queriendo escribir sobre este tema y al fin pude sentarme a hacerlo. Si has creado páginas con HTML seguramente conoces la palabra «Canvas», pero sino la conoces te explico.
Canvas o lienzo, en nuestra hermosa lengua, es un elemento de HTML a partir del famosísimo HTML5. Ha sido muy mencionado porque como su nombre lo dice es un lienzo que permite generar gráficos dinámicamente, permite renderización y animaciones entre otras cosas.
Dicho esto, es un elemento muy versátil que permite que con HTML puedas hacer «cosas más bonitas». Pero, como decimos en México, «para muestra un botón», aquí hay algunos ejemplos:
¿Qué tal? Podría mencionar más pero ya son muchas «cosas bonitas» en una sola publicación… La idea es que si quieres tener elementos gráficos dinámicos en tu sitio web, canvas es la opción.
¿Cómo uso CANVAS?
Si claro, te estarás preguntando cómo usarlo. Realmente es fácil, debes saber que se trata de una región dibujable definida en el código HTML con los atributos alto y ancho. Con código JavaScript puedes acceder a la zona con funciones especiales, solo es cuestión de conocerlas.
Y para conocerlas te puedo recomendar varios tutoriales clásicos pero hay un sitio web que ofrece una estructura básica que considero te puede ayudar mucho ya que es bastante claro y concreto en funciones que necesitas.
En la primera parte te muestra las bases: sus dos partes principales, atributos requeridos y cómo saber si tu navegador lo soporta.
A continuación te explica las «shapes» o formas soportadas con sus correspondientes atributos, muy gráfico todo para que visualmente te ubiques.
Después encontrarás los estilos y colores, en esta parte te ofrece los vínculos al sitio con más detalles de sintaxis para que puedas basar tu código en ejemplos y sea más sencillo. Lo mismo sucede para los efectos de color como gradientes o degradados.
Las siguientes secciones que verás son textos e imágenes. Hasta ahí digamos que te encuentras en el nivel 1 de aprendizaje, si pudiste aplicar lo anterior.
Pasando al nivel 2 encontrarás otros efectos importantes para los canvas como las transformaciones (traslación, rotación, escalado y sesgado), composiciones y recortes.
Animaciones, manipulación de pixeles, regiones dentro del canvas son lo siguiente.
Casi al final, en la que para mi es la mejor parte, encontrarás unos tips muy buenos e inspiración para continuar trabajando con canvas, es decir ligas a otros «bonitos» ejemplos para que te des una idea de todo lo que puedes alcanzar con este elemento de HTML.
Finalmente tienes varias fuentes de información que agilizarán tu aprendizaje. Me encanta que puedes descargar el manual en imagen por si necesitas una referencia y no tienes conexión.
Claro que si ya tienes un poco de conocimiento sobre HTML te será más sencillo utilizar el tutorial, pero sino, solamente ve a las ligas que proporciona al final de la web para capacitarte a profundidad y úsalo solo como referencia después.
Te dejo el sitio web, ¡me cuentas qué te parece!: HTML CANVAS TUTORIAL
¡Nos leemos pronto!
