Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Logo

Aprende Web

Crea y diseña tus sitios en la Web.

Canvas básico

Crea tus propios dibujos y animaciones con Canvas en HTML5


Y ahora tambien aprende a programar en C++ con Aprende Web C++

logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net





Sobre ésta página

Ültima modificación: 29-01-2016.

Visitas este mes: 457

Visitas el mes pasado: 292

logo
WEB-GRAFÍA

Mi agradecimiento a las siguientes páginas Web. en las cuales me he basado para la elaboración de este manual:


Manual de Canvas del HTML 5
Desarrollo Web
Tutorial de Canvas
mozilla.org
HTML5
htmlya
Empezando a dibujar en Canvas html 5 tutorial
taringa.net
Curva de Bézier
Wikipedia
flashcanvas
code.google.com
HTML5 Canvas tutorial
w3scool
HTML5 Canvas Element Tutorial
html5canvastutorials
The canvas element
HTML Living Standard

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.




Canvas básico (XI)

Insetar imágenes

imagen canvas

El objeto Image.

Para insertar imágenes en un canvas debemos tenerlas antes en Javascript, por lo que primero veremos el tratamiento de imágenes en Javascript.

Javascript posee una clase de objetos llamada Image que almacena en el DOM todas las imágenes. Podemos hacer dos cosas: utilizar una imagen que hay en otro sitio de la página, o crear un nuevo objeto de la clase image, al que asociamos una imagen que no está en la página.


Imagen de la página

Las imágenes de la página se almacenan en un array del DOM llamado images.

Por lo que lo más fácil para localizar una imagen en el DOM con javascript es utilizar este array, además al igual que en los formularios, podemos usar el atributo name para localizar la imagen. Por ejemplo si tenemos una imagen con este código HTML:

<img src="logo.gif" alt="logo" name="logotipo"/>

Podemos guardarla como objeto javascript en una variable mediante:

imagen1=document.images.logotipo

;

o también de manera más simple mediante:

imagen1=document.logotipo

Por supuesto el valor del atributo name debe ser único y distinto para cada imagen.

Por supuesto, la imagen se debe haber cargado completamente antes de llamarla con este código, por lo que todo el código debemos ponerlo dentro de la función window.onload=function()

Imagen nueva

Supongamos ahora que queremos colocar en el canvas una imagen nueva que no está en la página. Guardamos primero el archivo de imagen (por ejemplo coche.gif) en la carpeta de objetos. y después creamos un nuevo objeto de imagen:

imagen2= new Image();

Hemos guardado este objeto en una variable para poder trabajar después con él.

Sin embargo este objeto de momento está vacío, no contiene ninguna imagen, por lo que deberemos asignarle una imagen mediante su propiedad src:

imagen2.src="objetos/coche.gif";

Ahora ya tenemos un nuevo objeto de la clase imagen listo para trabajar con él.


Añadir imágenes

Para añadir imágenes en un canvas utilizaremos el método de canvas drawImage(). Este método puede tener 3, 5 ó 9 parámetros, y se comporta de forma distinta según el número de parámetros que tenga. La forma más simple es con tres parámetros e inserta un objeto de imagen con su tamaño real, por ejemplo si queremos insertar la imagen del logotipo vista anteriormente escribiremos en el código:

cxt.drawImage(imagen1,10,10);

Donde el primer parámetro (imagen1) es el objeto imagen que hemos obtenido del DOM tal cómo se ha explicado anteriormente. Los otros dos parámetros son las coordenadas horizontal o X (segundo parámetro) y vertical o Y (tercer parámetro) de la imagen dentro del canvas. Este es el punto del canvas donde se situa la esquina superior izquierda de la imagen.


Ejemplo con imagen de la página

Veamos ahora cómo colocar la imagen del logo de nuestra página dentro de un canvas, la imagen tiene en la página el siguiente código HTML:

<img src="objetos/logo.gif" alt="logo" name="logotipo" />

para empezar escribimos el código HTML del canvas:

<canvas id="ejemplo1" width="235" height="235">
</canvas>

Ponemos después el código javascript para el canvas. recuerda que debes tener ya en el código la función iniciaCanvas() que hemos visto en la segunda página de este manual, y además el código debe estar dentro de la función window.onload=function()

window.onload=function() {
imagen1=document.images.logotipo; //buscar imagen
cxt1=iniciaCanvas("ejemplo1")
  if (cxt1) {
     cxt1.beginPath(); //iniciar ruta
     cxt1.drawImage(imagen1,10,10); //insertar imagen
  }
}

El resultado puedes verlo aquí a la derecha.

La imagen aparece más grande que en nuestro logo, porque este es su tamaño real.


Ejemplo de imagen nueva

Para insertar una imagen nueva en la página seguiremos el mismo procedimiento que para la anterior, aunque hay que tener en cuenta varias cosas.

En primer lugar debemos crear el objeto imagen y asignarle una imagen real mediante su propiedad src tal como hemos visto anteriormente.

En segundo lugar debemos asegurarnos de que la imagen se ha cargado completamente antes de ponerla en el canvas. En la imagen anterior sabemos que se ha cargado porque la página está ya cargada cuando llamamos al método drawImage().; pero aquí al ser un nuevo objeto de imagen, que creamos posteriormente, puede que la imagen tarde más en cargarse, por lo que para asegurarnos, utilizaremos el siguiente código para poner la imagen en el canvas:

imagen2.onload=function() {

    cxt.drawImage(imagen2,10,50)

    }

Donde imagen2 es el objeto de imagen. Mediante esta función anonima conseguimos que hasta que el objeto de imagen no se haya cargado completamente, no se ejecuta el código que lo visualiza.

Queremos poner ahora una imagen que no está en esta página en un canvas. la imagen que vamos a poner en este ejemplo es el archivo coche.gif y la tienes en la página del manual "Animacion con CSS3" Ejemplo de animación.

Ya tenemos el archivo de imagen en la carpeta objetos, ahora ponemos el código del canvas, empezamos por el HTML:

<canvas id="ejemplo2" width="230" height="170">
</canvas>

Despues ponemos el código javascript, recuerda que tienes que tener ya la función iniciaCanvas() que hemos visto en la segunda página de este manual, y además el código debe estar dentro de la función window.onload=function().

cxt2=iniciaCanvas("ejemplo2");
if (cxt2) {
imagen2=new Image(); //nuevo objeto imagen
imagen2.src="../objetos/coche.gif"; //archivo de imagen al nuevo objeto
cxt2.beginPath(); //iniciar ruta
imagen2.onload=function() { //la nueva imagen tiene que haberse cargado
    cxt2.drawImage(imagen2,10,50); //insertar imagen en canvas
    }
}

El resultado del código anterior puedes verlo aquí a la derecha.

Hemos puesto una imagen nueva dentro del canvas, para ello hemos creado una imagen nueva, y la hemos puesto dentro del canvas después de que ésta se haya cargado.

Esta es la forma más sencilla de utilizar el método drawImage. Veremos en la siguiente página qué es lo que pasa cuando usamos este método con cinco o con nueve parámetros.






podemos insertar las imágenes en el canvas tal como las tenemos o modificarlas antes de insertarlas. Veremos en la siguiente página cómo insertar las imágenes modificando antes su aspecto.

Trabajar con imágenes.



Canvas (básico)

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un manda un correo

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com