Entendido.

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

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++

Manuales para la creación y diseño de páginas web

RSS. Suscribir canal.

Este obra está bajo una licencia de Creative Commons Reconocimiento-NoComercial 4.0 Internacional.

Canvas Básico (XII)

Trabajar con imágenes

Tamaño de imagen

En la página anterior vimos cómo insertar imágenes en un canvas. para ello utilizábamos el método drawImage(). Este método dijimos que podía tener 3, 5, ó 9 parámetros. Sin embargo en la página anterior sólo vimos su utilización con 3 parámetros.

Veremos en esta página la utilización de esta propiedad con 5 y 9 parámetros. Empezaremos por utilizar 5 parámetros:

Al poner 5 parámetros en la propiedad drawImage()el primero indica el objeto-imagen, el segundo y el tercero sus coordenadas dentro del canvas, y el cuarto y el quinto el ancho y el alto de la imagen, es decir su tamaño.

cxt.drawImage(imagen,x,y,ancho,alto);

Para los próximos ejemplos utilizaremos la siguiente imagen:

La imagen está aquí en su tamaño real, vamos ahora a insertarla en un canvas pero reduciéndola. Aunque tenemos la imagen en la página, trabajaremos fabricando un nuevo objeto de imagen, ya que esto suele ser lo más normal al insertar una imagen en un canvas.

empezamos por el código HTML:

<canvas id="ejemplo1" width="220" height="170">
</canvas>

Pondremos después el código javascript del canvas. Tal como hemos hecho en ejemplos anteriores, debemos haber puesto en el código la función IniciaCanvas(), que encontrarás en la segunda página de este manual, y escribimos el código dentro de la función window.onload=function().

window.onload=function() {
imagen1=new Image(); //nuevo objeto imagen
imagen1.src="objetos/garfield.gif"; //asignar imagen al objeto-imagen
cxt1=iniciaCanvas("ejemplo1");
if (cxt1) {
cxt1.beginPath(); //iniciar ruta
imagen1.onload=function() { //nos aseguramos de que la imagen se ha cargado
    cxt1.drawImage(imagen1,10,20,200,140); //insertamos y reducimos la imagen
    }
}
}

El resultado del código anterior lo vemos aquí a la derecha.

Los tres primeros parámetros de la función drawImage() cumplen la misma función que lo visto en el caso anterior, es decir, seleccionar la imagen y dar sus coordenadas en el canvas. Son los parámetros cuarto y quinto los que nos indican qué tamaño tiene que tener la imagen en el canvas.

Recortar imagen

El método drawImage() también puede utilizarse para recortar y pegar un trozo de la imagen en un canvas. en este caso el método necesita nueve parámetros:

cxt.drawImage(imagen,Xi,Yi,ancho_i,alto_i,Xc,Yc,ancho_c,alto_c)

El primer parámetro (imagen) es el objeto-imagen de javascript.

Los siguientes cuatro parámetros (del 2 al 5 inclusive) se refieren a la imagen. De éstos los dos primeros (Xi,Yi) son las coordenadas del recorte dentro de la imagen, estas coordenadas se refieren al punto superior izquierdo dentro de la imagen donde empieza el recorte. Los dos parámetros siguientes (ancho_i,alto_i) son el ancho y el alto del recorte.

Los últimos cuatro parámetros (del 6 al 9 inclusive) se refieren al canvas. De éstos los dos primeros (Xc,Yc) se refieren a las coordenadas del canvas donde se incluirá el recorte. Los otros dos (ancho_c,alto_c) son el ancho y el alto del recorte dentro del canvas.

Veamos ahora un ejemplo con la misma imagen anterior. Aunque ya tenemos la imagen en un objeto de imagen, crearemos otro objeto de imagen para no interferir con el canvas anterior.

Insertamos el código del canvas en el HTML:

<canvas id="ejemplo2" width="200" height="200">
</canvas>

Este es el código javascript para insertar un recorte de la imagen. Recuerda que tienes que haber puesto antes la función iniciaCanvas() y escribir el código dentro del window.onload=function().

imagen2=new Image(); //nuevo objeto imagen
imagen2.src="objetos/garfield.gif"; //asignar imagen al objeto-imagen 
cxt2=iniciaCanvas("ejemplo2");
if (cxt2) {
cxt2.beginPath(); //iniciar ruta
imagen2.onload=function() { //la imagen tiene que estar cargada
     //insertamos, recortamos y colocamos la imagen.
     cxt2.drawImage(imagen2,160,0,130,130,10,40,180,150);
     }
}

El resultado del canvas anterior puedes verlo aquí a la derecha

En este canvas hemos recortado un trozo de la imagen y la hemos insertado en el canvas. Para ello hemos puesto 9 parámetros al método drawImage, el primero es el objeto-imagen, los cuatro siguientes son los que recortan imagen, y los cuatro últimos son para insertar el recorte en el canvas.

Aquí termina este primer manual de Canvas, hemos aprendido lo básico para saber manejar un canvas. Sin embargo Canvas de HTML5 tiene más posibilidades. Puedes seguir aprendiendo más sobre canvas en el :

Manual de canvas avanzado

Página creada por ANYELGUTI.

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

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

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