HTML canvas drawImage()Método
Objeto CanvasImagen a usar:
Ejemplo
Dibujar una imagen en el lienzo:
JavaScript：
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,10,10);
Pruébalo »
Compatibilidad del navegador
Internet Explorer 9, Firefox, Opera, Chrome y Safari son compatibles con el método drawImage().
Nota:Internet Explorer 8 y versiones anteriores no admiten el elemento <canvas>.
Definición y uso
El método drawImage() dibuja imágenes, lienzos o videos en el lienzo.
El método drawImage() también puede dibujar partes de una imagen y/o aumentar o disminuir el tamaño de la imagen.
Sintaxis de JavaScript
Posicionar una imagen en el lienzo:
| Sintaxis de JavaScript: | context.drawImage(img,x,y); |
|---|
Posicionar una imagen en el lienzo y especificar su ancho y alto:
| Sintaxis de JavaScript: | context.drawImage(img,x,y,width,height); |
|---|
Recortar una imagen y posicionar la parte recortada en el lienzo:
| Sintaxis de JavaScript: | context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height); |
|---|
Valores de parámetros
| Parámetro | Descripción | |
|---|---|---|
| img | Especifica la imagen, el lienzo o el video que se va a utilizar. | |
| sx | Opcional. La posición de la coordenada x donde comienza el recorte. | |
| sy | Opcional. La posición de la coordenada y donde comienza el recorte. | |
| swidth | Opcional. El ancho de la imagen recortada. | |
| sheight | Opcional. La altura de la imagen recortada. | |
| x | La posición de la coordenada x donde se coloca la imagen en el lienzo. | |
| y | La posición de la coordenada y donde se coloca la imagen en el lienzo. | |
| width | Opcional. El ancho de la imagen a usar (estirar o reducir la imagen). | |
| height | Opcional. La altura de la imagen a usar (estirar o reducir la imagen). |
Más ejemplos
Ejemplo
Posicionar una imagen en el lienzo y luego especificar su ancho y alto:
JavaScript：
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,10,10,150,180);
Pruébalo »
Ejemplo
Recortar una imagen y posicionar la parte recortada en el lienzo:
JavaScript：
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,90,130,50,60,10,10,50,60);
Pruébalo »
Ejemplo
Video a utilizar (presiona el botón de reproducción para iniciar la demostración):
Lienzo:
JavaScript (cada 20 milisegundos, el código dibuja el fotograma actual del video):
var c=document.getElementById("myCanvas");
ctx=c.getContext('2d');
v.addEventListener('play',function() {var 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);
Pruébalo »
Otras extensiones