DesarrolloLibre

Desarrollo Web, Android, juegos y mucho más

Categorias
¡Actualizado el 25-01-2016!

A través de la etiqueta <canvas> se habilita un área o mejor dicho lienzo en donde es posible dibujar, escribir o incluso renderizar imágenes a través de scripts realizados con JavaScript; todo esto comienza definiendo la etiqueta <canvas> en cuestión; veamos:

<canvas id="myCanvas" width="500" height="500" >
<p>Su navegador no soporta canvas :(</p>
</canvas>
Con el canvas es posible crear todo tipo de gráficos simples o complejos a partir de primitivas básicas como círculos, óvalos, rectángulos líneas y polígonos además de fácilmente animables con el método requestAnimationFrame e inclusive el canvas es extendible hasta con los eventos de teclado y ratón, además de otras muchísimas otras características no explicadas en esta entrada que de otra forma (con CSS) serían prácticamente imposibles (o muy difíciles) de realizar.

Soporte del canvas en los navegadores

Los navegadores modernos desde hace un buen tiempo cuenta con soporte nativo para la etiqueta canvas; sin embargo, es recomendable verificar el soporte; como muchas otras etiquetas, podemos verificar el soporte desde la misma etiqueta; es decir cualquier cosa que se encuentre entre las etiquetas de apertura y cierre de canvas será interpretado por navegadores que no soportan la etiqueta:

  <canvas>
    Su navegador no soporta Canvas
  </canvas>

A nivel de JavaScript, podemos realizar la siguiente validación:

function isCanvasSupported(){ 
  var elem = document.createElement('canvas'); 
  return !!(elem.getContext && elem.getContext('2d')); 
}

Algunas ventajas de usar el canvas en nuestras aplicaciones

Cualquier cosa que escribamos dentro de las etiquetas canvas solamente será interpretado (mostrado) en navegadores que no soportan la etiqueta <canvas>.

¿Cómo funciona la etiqueta <canvas>?

Finalmente, vayamos a la parte interesante de todo esto del canvas y empecemos a realizar nuestra primera aplicación.

Con tres sencillos pasos podemos comenzar a trabajar con esta etiqueta:

1. Referenciando el canvas

Lo primero es obtener una referencia al canvas con el cual deseamos trabajar; en este caso, la etiqueta <canvas> tiene el identificador myCanvas:

var myCanvas = document.getElementById("myCanvas");

2. Obteniendo el contexto del canvas

Para realizar cualquier operación con el canvas , entiéndase dibujar gráficos y/o imágenes debemos obtener el contexto del elemento canvas y de una vez acceder a la API:

El acceso al contexto del canvas proporciona todos los métodos y propiedades para poder dibujar en el mismo.
var ctx=c.getContext("2d");

3. Dibujando primitivas

Ahora si, podemos empezar a dibujar sobre nuestro canvas; veamos una serie de experimentos que ejemplifican el uso del canvas.

3.1 Dibujando una línea con canvas

Lo más sencillo consiste en dibujar una línea; para ello necesitamos los siguientes métodos:

3.2 Dibujando un círculo con canvas

Para dibujar un círculo en el canvas se debe usar los siguientes métodos:

3.3 Dibujando un texto con canvas

Para dibujar existen dos métodos texto con algún formato dentro del canvas.

3.4 Dibujando una imagen con canvas

Es posible que te preguntes cuál es el objetivo de dibujar una imagen en un canvas aparte de poder mezclarla con otras primitivas y/o imágenes, además de esto podemos alterar cada uno de los píxeles que componen a la imagen y aplicar algún Procesamiento Digital de Imágenes; eso entre otros experimentos que se han desarrollado a lo largo de tiempo podemos verlos a continuación:


Publicidad

Give me for a beer!

Algunos recursos que te pueden interesar

Burbujas flotantes con JavaScript

Burbujas flotantes con JavaScript

Árbol arcoíris creciente

Árbol arcoíris creciente

Calendario de cubo

Calendario de cubo

Algunos artículos que te pueden interesar

Dibujando formas geométricas con Canvas en Android

Dibujando formas geométricas con Canvas en Android

Un Canvas no es más que una superficie en el cual se puede dibujar; con las primitivas en Android es posible dibujar gráficos como líneas, círculos, óvalos, cuadrados, rectángulos y textos.

Andrés Cruz 02-03-2015

Las etiquetas video y audio para multimedia en HTML

Las etiquetas video y audio para multimedia en HTML

En esta entrada hablaremos de las etiquetas vídeo y audio que permiten mostrar contenido multimedia a nuestra web mediante vídeos y audios de distintos formatos.

Andrés Cruz 18-06-2015

¿Cómo obtener por separado el canal RGB de una imagen con HTML5?

¿Cómo obtener por separado el canal RGB de una imagen con HTML5?

En este artículo veremos como obtener los tres canales RGB de una imagen y operarlos por separados.

Andrés Cruz 15-05-2014