Imagen a utilizar:
Ejemplo
Dibujar la imagen en el lienzo:
JavaScript:
window.onload = function() {
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,10,10);
}; Inténtalo tú mismo " Soporte para el navegador
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con el método.
| Método | |||||
|---|---|---|---|---|---|
| drawImage() | Sí | 9.0 | Sí | Sí | Sí |
Definición y Uso
El drawImage() método dibuja una imagen, lona, o un vídeo sobre el lienzo.
El drawImage() método también puede dibujar partes de una imagen, y / o aumentar / reducir el tamaño de la imagen.
 | Nota: No se puede llamar a la drawImage() método antes de que la imagen haya cargado. Para asegurarse de que la imagen se ha cargado, puede llamar drawImage() from window.onload() o desde document.getElementById(" imageID ").onload . |
|---|
sintaxis JavaScript
Posicionar la imagen en el lienzo:
| la sintaxis de JavaScript: | context.drawImage(img,x,y); |
|---|
Posicionar la imagen en el lienzo, y especificar la anchura y la altura de la imagen:
| la sintaxis de JavaScript: | context.drawImage(img,x,y,width,height); |
|---|
Clip de la imagen y la posición de la parte recortada en el lienzo:
| la sintaxis de JavaScript: | context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height); |
|---|
Los valores de los parámetros
| Parámetro | Descripción | Juegalo |
|---|---|---|
| img | Especifica la imagen, lona, o elemento de vídeo a utilizar | |
| sx | Opcional. La coordenada x dónde empezar recortes | Juegalo " |
| sy | Opcional. La coordenada y por dónde empezar recortes | Juegalo " |
| swidth | Opcional. La anchura de la imagen recortada | Juegalo " |
| sheight | Opcional. La altura de la imagen recortada | Juegalo " |
| x | La coordenada x dónde colocar la imagen en el lienzo | Juegalo " |
| y | La coordenada y dónde colocar la imagen en el lienzo | Juegalo " |
| width | Opcional. La anchura de la imagen a utilizar (estiramiento o reducir la imagen) | Juegalo " |
| height | Opcional. La altura de la imagen a utilizar (estiramiento o reducir la imagen) | Juegalo " |
Más ejemplos
Ejemplo
Posicionar la imagen en el lienzo, y especificar la anchura y la altura de la imagen:
JavaScript:
window.onload = function() {
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,10,10,150,180);
}; Inténtalo tú mismo " Ejemplo
Clip de la imagen y la posición de la parte recortada en el lienzo:
JavaScript:
window.onload = function() {
var c=document.getElementById("myCanvas");
var
ctx=c.getContext("2d");
var
img=document.getElementById("scream");
ctx.drawImage(img,90,130,50,60,10,10,50,60);
}; Inténtalo tú mismo " Ejemplo
Vídeo de usar (presione Play para iniciar la demostración):
Lona:
JavaScript (el código dibuja el cuadro actual del video cada 20 milisegundos):
var v=document.getElementById("video1");
var c=document.getElementById("myCanvas");
var ctx=c.getContext('2d');
var i;
v.addEventListener('play',function() {i=window.setInterval(function()
{ctx.drawImage(v,5,5,260,125)},20);},false);
v.addEventListener('pause',function() {window.clearInterval(i);},false);
v.addEventListener('ended',function() {clearInterval(i);},false); Inténtalo tú mismo "