Webmaster Workers utiliza cookies. Lea nuestra Política de Privacidad para obtener más información. Para eliminar este mensaje, haga clic en el siguiente botón: Acepto el uso de cookies


CANVAS (graficar imagenes)





Para graficar imágenes disponemos del método drawImage, el cual se comporta distinto según la cantidad de parámetros que le pasamos.


La primera forma es llamarlo con los siguientes parámetros:



drawImage(objeto Image, x, y)

De esta forma dibuja la imagen con el tamaño real de la imagen, en la coordenada x e y indicada.


La segunda forma es:



drawImage(objeto Image, x, y, ancho, alto)

La imagen se redimensiona con los valores indicados en ancho y alto.


La tercer y última forma es:



drawImage(objeto Image, x1, y1, ancho1, alto1,x2, y2, ancho2, alto2)

Los primeros cuatro parámetros indican un trozo del la imagen y los cuatro restantes es el lugar donde se debe graficar ese trozo de imagen.



Veamos un ejemplo que utiliza este método:



<!DOCTYPE HTML>
<html>
<head>

<script type="text/javascript">
function retornarLienzo(x) {
var canvas = document.getElementById(x);
if (canvas.getContext) {
var lienzo = canvas.getContext("2d");
return lienzo;
} else
return false;
}

function dibujar() {
var lienzo=retornarLienzo("lienzo1");
if (lienzo) {
lienzo.fillStyle="rgb(0,0,0)";
lienzo.fillRect(0,0,600,600);
img1 = new Image();
img1.src = 'http://www.htmlya.com.ar/simulador/foto1.jpg';
img1.onload = function(){
lienzo.drawImage(img1,0,0);
lienzo.drawImage(img1,300,0,50,50);
lienzo.drawImage(img1,0,0,125,125,0,300,72,72);
}
}
}

</script>

</head>
<body onLoad="dibujar()">
<canvas id="lienzo1" width="600" height="600">
Su navegador no permite utilizar canvas.
</canvas>
</body>
</html>


Creamos un objeto de la clase Image:



img1 = new Image();

Inicializamos la propiedad src con la fuente de la imagen a recuperar:



img1.src = 'http://www.htmlya.com.ar/simulador/foto1.jpg';

Inicializamos la propiedad onload del objeto de la clase Image con una función anónima:



img1.onload = function(){
lienzo.drawImage(img1,0,0);
lienzo.drawImage(img1,300,0,50,50);
lienzo.drawImage(img1,0,0,125,125,0,300,72,72);
}

Esta función anónima se ejecuta cuando se finaliza la carga de la imagen en el navegador.


Primero dibujamos la imagen con el tamaño original:



lienzo.drawImage(img1,0,0);

Luego la dibujamos con un ancho de 50 píxeles y 50 del alto.



lienzo.drawImage(img1,300,0,50,50);

Por último dibujamos extrayendo de la imagen original 125 píxeles de ancho y 125 de alto y dibujamos este trozo de imagen en la coordenada (0,300) con un ancho y alto de 72 píxeles.



lienzo.drawImage(img1,0,0,125,125,0,300,72,72);








Opciones
Estadísticas
Creado 01.01.1970 a las 00:00 hs
Categoría HTML 5

  • Medallas
  • 0
    Favoritos
  • 9693
    Visitas
  • 0
    Puntos
  • 0
    Seguidores
Comentarios
0
Cargando comentarios espera un momento...
No tienes permisos para comentar.

Para poder comentar necesitas estar Registrado. O.. ya tienes usuario? Logueate!
Autor del post
Ver perfil de Administrador Administrador
Hombre Administrador  Mensaje
43 1,352 1
Medallas
No tiene medallas
Tags
Posts relacionados