drawImage()

Logotipo de Javascript

Permite colocar dentro del canvas una imagen, un video u otro canvas.

Primera opción

Permite colocar la imagen dentro del canvas.

drawImage(img,dx,dy);

Parámetros

img. El elemento a dibujar en el canvas.

dx. La coordenada x en donde se va a colocar el elemento en el canvas.

dy. La coordenada y en donde se va a colocar el elemento en el canvas.

Ejemplo

<script>
window.addEventListener("load",ponerFoto);
function ponerFoto(){
 var contexto = document.getElementById("elCanvas").getContext("2d");
 contexto.drawImage(laFoto,10,50);
}
</script>

Segunda Opción

Además de posicionar la imagen en el canvas, permite modificar su tamaño.

contexto.drawImage(img,dx,dy,dWidth,dHeight);

Parámetros

img. El elemento a dibujar en el canvas.

dx. La coordenada x en donde se va a colocar el elemento en el canvas.

dy. La coordenada y en donde se va a colocar el elemento en el canvas.

dWidth. Ancho de la imagen dentro del canvas.

dHeight. Alto de la imagen dentro del canvas.

Ejemplo

window.addEventListener("load",ponerFoto);
function ponerFoto(){
 var contexto = document.getElementById("elCanvas").getContext("2d");
 contexto.drawImage(laFoto,10,50,100,100);
}




Tercera opción

Permite seleccionar una parte de la imagen para dibujar en el canvas.

contexto.drawImage(img,sx, sy, sWidth, sHeight, dx,dy, dWidth, dHeight);

Parámetros

img. El elemento a dibujar en el canvas.

sx. La coordenada x del rectángulo que se tomará de la imagen.

sy. La coordenada y del rectángulo que se tomará de la imagen.

sWidth. El ancho del rectángulo que se tomará de la imagen.

sHeight. El alto del rectángulo que se tomará de la imagen.

dx. La coordenada x en donde se va a colocar el elemento en el canvas.

dy. La coordenada y en donde se va a colocar el elemento en el canvas.

dWidth. Ancho de la imagen dentro del canvas.

dHeight. Alto de la imagen dentro del canvas.

Ejemplo

window.addEventListener("load",ponerFoto);
function ponerFoto(){
 var contexto = document.getElementById("elCanvas").getContext("2d");
 contexto.drawImage(laFoto,200,140, 60, 60, 10,50,120,120);
}

Observaciones

La imagen debe estar cargada, por lo que debe usarse después de que se llame el método load de la ventana, o de la imagen.

Be the first to comment

Leave a Reply

Your email address will not be published.


*