Unidad 15. Introducción a los gráficos Canvas (I)

Canvas es un elemento de HTML 5 que permite dibujar gráficos, manipular imágenes y realizar animaciones en una página web de forma dinámica. Es decir, el gráfico se crea en el momento en que se carga la página. El gráfico se define mediante programación, usualmente Javascript. Una vez creado el gráfico se pueden programar acciones para que el usuario interactúe con él, por ejemplo, haciendo clic para arrancar una animación o arrastrando un elemento del gráfico.

A continuación puedes ver dos vídeos que muestran el contenido de esta unidad.

Pimera parte de Canvas:

Segunda parte de Canvas:

Aunque el elemento Canvas se crea con la etiqueta <canvas> </canvas> al hablar de Canvas en sentido amplio nos referimos a toda la API que incluye un conjunto de funciones para dibujar, líneas, rectángulos, círculos, etc. así como para rotar, escalar, transformar elementos gráficos y otras funciones de variado uso.

Al definir un Canvas en una página web se crea un lienzo de dibujo, es decir, un área de dibujo rectangular. Después de generar el dibujo lo que queda es un "mapa de bits", es decir, cada coordenada del lienzo tiene asignado un color, no queda ninguna estructura de lo que contiene el lienzo. Canvas no crea objetos vectoriales al estilo de otros entornos como SVG o Flash, sino mapas de bits, como una imagen fotográfica.

De hecho podemos cargar una imagen fotográfica en el Canvas y manipular sus pixeles uno a uno.

Canvas ya lleva un tiempo incorporado a HTML y puede ser representado por la mayoría de los navegadores actualizados. No obstante, es conveniente dar un contenido alternativo para los navegadores que no soportan Canvas, como una imagen fija o un texto aclaratorio, como veremos más adelante.

Así pues, dibujar con Canvas permite crear gráficos de forma sencilla que se generan al momento de cargarse la página, por ejemplo, la siguiente imagen representa dibujos realizados con Canvas cuyo código veremos en esta unidad.

 Cursos Informática Gratuitos