Imágenes
Canvas puede trabajar con imágenes en los formatos más comunes (GIF, JPEG, PNG) y dispone de funciones para manipular las imágenes a nivel completo (escalarlas, girarlas, ...) y también a nivel de pixel. Esto da una gran potencia al manejo de imágenes con Canvas. Se pueden usar imágenes como fondo, se pueden realizar miniaturas y ampliaciones, se les puede cambiar el color, etc.
El primer paso es cargar la imagen, hay varios métodos para hacerlo, pero siempre hay que tener presente que hasta que la imagen no se haya cargado completamente no se puede trabajar con ella.
Veamos dos de los métodos más comunes para cargar imágenes:
1- Creando el objeto dentro de Javascript
Mediante new Image creamos una instancia del objeto Image, luego le asignamos una imagen y no empezamos a usarla hasta que no se haya cargado.
Por ejemplo:
var imagen = new Image();
imagen.src = 'https://www.aulaclic.es/articulos/graficos/cabeza_pato.png';
imagen.onload = function(){
// usar la imagen }
2- Usando una imagen de la página web
Con la etiqueta <img> cargamos la imagen desde el body de la página web y le damos un identificador (por ejemplo, "nombre_imagen"), para acceder a la imagen desde Javascript utilizamos
document.getElementById("nombre_imagen")
Si queremos que la imagen se vea solo después de procesarla con Canvas podemos utilizar la propiedad "hidden" en la etiqueta <img>.
Hay más formas de cargar imágenes, por ejemplo, se puede utilizar el imagen generada en otro objeto Canvas. También se pueden cargar mediante el método "data:url".
Una vez tenemos cargada la imagen podemos dibujarla mediante la función drawImage que admite varios formatos:
1. drawImage(imagen, x, y)
Dibuja la imagen en el lienzo colocando la esquina superior izquierda de la imagen en las coordenadas (x,y)
2. drawImage(imagen, x, y, ancho, alto) Permite, además, escalar la imagen.
Los tres primeros parámetros tienen el mismo significado que en el caso anterior. Los parámetros ancho y alto definen el tamaño (en pixels) con el que se dibujará la imagen. Si son mayores que el original obtendremos una ampliación de la imagen, mientras que si son menores obtendremos una miniaturización de la imagen. Si queremos que la imagen no se deforme deberemos mantener la proporción ancho/alto de la imagen original.
3. drawImage(imagen, x1, y1, ancho1, alto1, x2, y2, ancho2, alto2) Permite escalar una porción de la imagen.
Vamos a explicar este caso sobre la imagen siguiente:
Lo que se dibujaría en el lienzo con esta función es sólo el contenido del recuadro rojo, hemos incluido como fondo la imagen original para poder explicarlo mejor.
Esta función toma una porción de la imagen original (definida por x1,y1, ancho1, alto1) y dibuja esa porción en otra posición (x2,y2) y con otra escala (ancho2, alto2)
En este caso, hemos creado una ampliación de la zona del ojo del pato porque los valores de ancho2 y alto2 son mayores que ancho1 y alto1,
A continuación tenemos el código que presenta los tres casos que acabamos de ver.
Ejemplo 7.
<html>
<head>
<title>Ejemplo 7 Canvas </title>
<script type="text/javascript">
function dibujarCanvas(){
var canvas = document.getElementById('miCanvas');
var contexto = canvas.getContext('2d');
// imagen
var imagen = new Image();
imagen.onload = function(){
contexto.drawImage(imagen,0,0); // imagen completa en la posición (0,0)
contexto.drawImage(imagen,285,0, 150,107); // escalado
contexto.drawImage(imagen,130,85,80,60,285,205,150,107); // escalado de una porción
contexto.strokeStyle = 'yellow';
contexto.strokeRect (130,85,80,60); // rectángulo amarillo
}
imagen.src = 'https://www.aulaclic.es/articulos/graficos/cabeza_pato.png';
}
</script>
</head>
<body onLoad="dibujarCanvas();">
<canvas id="miCanvas" width="450" height="350">Su navegador no soporta Canvas.</canvas>
</body>
</html>
Puedes ejecutar el código anterior copiándolo y pegándolo en el siguiente recuadro, luego pulsa el botón "Visualizar el código escrito".
El código anterior produce este resultado:
Más funciones y Frameworks
Este artículo llega hasta aquí pero Canvas tiene muchas más cosas. Vamos a citar algunas de ellas.
Con Canvas se pueden dibujar textos definiendo el estilo, la fuente, el tamaño, la alineación, el color, el relleno, etc.
También se puede detectar la posición del ratón para interactuar con el usuario.
Al dibujar una forma después de otra se puede especificar si la va a tapar, si va a quedar debajo, si se va a transparentar, si se va a producir una intersección , etc.
Se pueden definir formas que actuen como máscaras.
Para realizar animaciones existen las funciones limpiar, salvar y restaurar el estado del Canvas.
Hay funciones para transformar el Canvas, trasladarlo, rotarlo y escalarlo.
En las siguientes páginas web están explicadas todas estas funciones:
- Canvas Tutorial. Mozilla.org
- Manual de Canvas del HTML 5.
- The Canvas Element. Whatwg.org
Los frameworks son librerías con multitud de funciones predefinidas que ayudan a trabajar más eficientemente con Canvas, liberando al programador de realizar muchas tareas rutinarias.
Algunos de los frameworks ultizados con Canvas son los siguientes:
- EaselJS
- Paper.js
- three.js
Cursos Informática Gratuitos Síguenos en: Facebook Sobre aulaClic Política de Cookies
© aulaClic. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.