BREVE INTRODUCCIÓN A CANVAS

Canvas, una API de HTML5:

Dos de los grandes cambios que supuso el lanzamiento de html5 fueron la implementación de las etiquetas <video>, que permitian prescindir de plugins como flash player para el procesamiento de videos, y la implementación de la API Canvas, que es una extensa librería que tiene sus correspondientes objetos y métodos, y que permite el procesamiento y la animación de gráficos sin recurrir a plugins de terceros. Estos cambios supusieron un aumento en la eficacia, autonomía y velocidad de carga de las páginas web escritas en html 5. El elemento principal de la API Canvas es la etiqueta <canvas>, que será una zona acotada donde podemos incluir gráficos y textos a los que podremos dotar de animación. Dichos gráficos deberán ser definidos vectorialmente, mediante javaScript, indicando las cordenadas que definen su tamaño, ubicación y desplazamiento (en el caso de que se les añada movimiento).

MÉTODOS DE LA API CANVAS:

Dibujando líneas simples:

Método getContext("2d); - Mediante este método vamos a establecer si el gráfico que vamos a dibujar dentro del área <canvas> es un gráfico en 2D o en 3D. Siempre que se trate de un nuevo <canvas> tendremos que indicar esta información.

Método beginPath(); - Para poder comenzar a dibujar uno o varios trazados dentro de un área <canvas> es necesario usar este método. Después de precisar que vamos a comenzar a dibujar un trazo mediante este método deberemos definir sus caracteristicas mediante otros métodos y propiedades.

Método moveTo(x, y); - Cuando se trata de un dibujo en 2D, después de utilizar el método beginPath() será necesario emplear el método moveTo(x, y) para indicar las coordenadas donde queremos que empieze el trazo a dibujar.

Método lineTo(x, y); - Una vez que se ha indicado el punto de origen del trazo (linea) a dibujar, mediante el método moveTo(x, y), será necesario precisar las cordenadas donde queremos que termine dicho trazo, para lo cual se utiliza el método lineTo(x, y).

Propiedad strokeStyle - Esta propiedad establece el color del trazo que podemos dibujar dentro área delimitada por el <canvas>. Por ejemplo: strokeStyle = "rgb(255, 255, 255)".

Propiedad lineWidth - A través de esta propiedad podremos especificar el grosor en pixeles del trazo que vamos a dibujar.

Método stroke(); - Este método será invocado después de haber utilizado los métodos anteriores, y será el que definitivamente dibuje el trazo con todas las caracteristicas que han sido definidas anteriormente.

dibujando una línea en canvas

Función javaScript que dibuja una linea roja en un <canvas> con id="canvas_area"

Propiedad lineCap - Con esta propiedad podremos modificar los extremos de las líneas que dibujemos: Si su valor es "butt" la línea comenzará y finalizará de manera abrupta, si su valor es "round" los extremos serán redondeados, y si su valor es "square" la línea mostrará unos cuadrados en cada uno de sus extremos.

Propiedad lineJoin - Propiedad que indica como se mostrarán los vértices de las uniones de los segmentos que componen una forma geométrica: El valor "bevel" creará uniones cuadradas, el valor "round" redondeará dichas uniones, y el valor "miter" dará lugar a ángulos.

Dibujando rectángulos:

Método strokeRect(x, y, ancho, alto); - Este método nos permite dibujar el contorno de un rectángulo, pasandole como parámetros las cordenadas x e y donde se ubicará dicho rectángulo, y también las dimensiones en pixeles de la altura y la anchura de dicho rectángulo.

Método fillRect(x, y, ancho, alto); - Gracias a este método indicaremos las coordenadas y el tamaño de las zonas rectangulares que queremos colorear.

Propiedad fillStyle - Mediante esta propiedad indicaremos el color de relleno de un contorno geométrico, por ejemplo de un cuadrado. Primero indicaremos el color de relleno y luego dibujaremos la correspondiente forma geométrica. En el caso de un cuadrado de color uniforme que no tenga bordes de un color diferente utilizaremos el método fillRect().

Método clearRect(x, y, ancho, alto); - Método que utilizaremos para borrar elementos rectangulares, o secciones rectangulares situadas dentro de otras figuras, siempre que actuemos dentro del área definida por <canvas>.

dibujando un rectángulo en canvas

Función javaScript que dibuja un rectángulo de contorno azul con relleno naranja en un <canvas> con id="canvas_area"

Creando trazados curvos y arcos rellenos:

Método arc(x, y, radio, ángulo de comienzo, ángulo final, sentido antihorario); - Con los dos primeros parámetros indicaremos las coordenadas del centro del arco, el tercer parámetro es el radio. Posteriormente, con el cuarto y quito parámetro precisaremos el ángulo de comienzo y el ángulo final en radianes (el valor matematico "pi" equivale a 180º en radianes). Por último vamos a indicar el sentido en el que se va dibujar el arco, creandose un arco en sentido antihorario si este parámetro guarda el valor true, o en sentido horario si indicamos el valor false.

Método curva de Bézier: bezierCurveTo(coordenada x manejador1, coordenada y manejador1, coordenada x manejador2, coordenada y manejador2, coordenada x del segundo punto fijo, coordenada y del segundo punto fijo); - Se trata de otro método diferente para crear arcos o curvas. Se trata de crear curvas a partir de dos puntos fijos y dos puntos invisibles algunos programas de diseño e ilustración, tales que Photoshop e Illustrator, donde las curvas se modifican mediante dos manejadores. El primer punto fijo necesario queda definido en la instrucción moveTo(x, y); y las coordenadas del segundo punto fijo se precisan dentro del método bezierCurveTo() en sus dos últimos parámetros.

Método curva de quadraticCurveTo: quadraticCurveTo(coordenada x manejador1, coordenada y manejador1, coordenada x del segundo punto fijo, coordenada y del segundo punto fijo); - Este es un método similar al método Bézier pero en en este caso se empleará solo un manejador para crear la curva en lugar de dos. El primer punto fijo necesario para definir el arco queda definido mediante la instrucción moveTo(x, y); y las coordenadas del segundo punto fijo se indican mediante los dos últimos parámetros del método quadraticCurveTo().

dibujando arcos y circunferencias en canvas

Función javaScript que dibuja dos arcos azules, uno en sentido antihorario y otro en sentido horario, y una circunferencia con relleno azul en un <canvas> con id="canvas_area"

dibujando una curva animada en canvas

Función javaScript que dibuja una curva mediante los métodos quadraticCurveTo() y setInterval() en un <canvas> con id="canvas_area"

Manipulando textos con canvas:

Método fillText("texto", x, y); - Con este método conseguimos mostrar el "texto" en las coordenadas x e y que indiquemos, dentro del área del <canvas>. Hay que tener en cuenta la altura del texto a la hora de introducir las coordenadas dentro de método ya que si le adjudicamos el valor 0 a la coordenada y el texto no se mostrará.

Método strokeText("texto", x, y); - Mediante este método solo se creará el contorno del texto.

Propiedad font - Gracias a esta propiedad podremos establecer la tipografía, tamaño y estilo de letra del texto. Ejemplo: canvasBoard.font = "bold 20px Verdana";

Propiedad textAlign - Esta propiedad nos permite fijar cual es el tipo de alineación del texto. Los valores establecidos son: "start", "end", "left", "right" o "center".

Método measureText("texto"); - Este método devolerá el ancho en pixeles del "texto" indicado.

dibujando textos dentro de un canvas

Función javaScript que muestra un texto y modifica su ubicación y alineación dentro de un un <canvas> con id="canvas_area"

Utilizando imagenes con canvas:

En canvas podemos mostrar imagenes mediante el método drawImage(), que podrá recibir una cantidad variable de parámetros:

- Método drawImage(objetoImagen, x, y); - Se mostrará la imagen (objetoImagen) con su tamaño real en la coordenada x e y.

- Método drawImage(objetoImagen, x, y, ancho, alto); - Si añadimos los parámetros de ancho y alto podremos redimensionar la imagen a mostrar según las medidas que nos interesen.

- Método drawImage(objetoImagen, x1, y1, ancho1, alto1, x2, y2, ancho2, alto2); - Mediante esta versión del método drawImage() podemos mostrar dentro del <canvas> un trozo de la imagen (objetoImagen), que viene definido por los cuatro primeros parámetros, en el espacio del <canvas> que establece los cuatro últimos parámetros.

mostrando una imagen dentro de un canvas

Función javaScript que muestra un logotipo cuadrado de 170 x 170 pixeles dentro de un <canvas> con id="canvas_area"

Transparencias:

Propiedad fillStyle = "rgba()"; - Para poder crear transparencias en canvas tendremos que modificar ligeramente la propiedad fillStyle. Tendremos que utilizar colores con cierto grado de transparencia, para ello deberemos indicar los colores de relleno en rgba. Cuando utilizamos este sistema para indicar un color su último parámetro será el valor de transparencia. Dicho valor puede estar entre 0 y 1, siendo 0 totalmente transparente y 1 totalmente opaco. Ejemplo de un color de relleno al 50% de opacidad: .fillStyle = "rgba(51, 204, 51, 0.5)";

aplicando transparencias dentro de un canvas

Función javaScript que utiliza transparencias en un <canvas> de 250 x 150 pixeles

Sombras:

Propiedad shadowOffsetX - Mediante esta propiedad podremos regular el desplazamiento de la sombra respecto del eje X. Un valor positivo hará que la sombra se vea a la derecha de la figura sobre la que aplicamos la sombra, y un valor negativo hará que la sombra se muestre a la izquierda de la figura.

Propiedad shadowOffsetY - Mediante esta propiedad podremos regular el desplazamiento de la sombra respecto del eje Y. Un valor positivo hará que la sombra se vea debajo de la figura sobre la que aplicamos la sombra, y un valor negativo hará que la sombra se muestre sobre la figura en cuestión.

Propiedad shadowColor - Esta propiedad nos permite fijar el color y grado de transparencia de la sombra. Ejemplo: .shadowColor = "rgba(230, 230, 230, 0.3)";

Propiedad shadowBlur - Nos permitirá indicar la cantidad de difuminado que queremos aplicar a la sombra.

aplicando sombras dentro de un canvas

Función javaScript que aplica sombras en un <canvas> de 250 x 150 pixeles