Método drawImage() de Canvas
Definición y uso
drawImage() El método dibuja imágenes en el lienzo, lienzo o video.
drawImage() El método también puede dibujar partes de la imagen y / o aumentar o disminuir el tamaño de la imagen.
Ejemplo
Ejemplo 1
Imagen a usar:
Dibujar una imagen en el lienzo:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("tulip");
ctx.drawImage(img,10,10);
Consejo:Más ejemplos en la parte inferior de la página.
Sintaxis
Sintaxis de JavaScript 1
Ubicar la imagen en el lienzo:
context.drawImage(img,x,y);
Sintaxis de JavaScript 2
Ubicar la imagen en el lienzo y especificar el ancho y la altura de la imagen:
context.drawImage(img,x,y,width,height);
Sintaxis de JavaScript 3
Cortar la imagen y ubicar la parte cortada en el lienzo:
context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
Valor del parámetro
| Parámetro | Descripción |
|---|---|
| img | Especificar la imagen, lienzo o video a usar. |
| sx | Opcional. Posición x de inicio del corte. |
| sy | Opcional. Posición y de inicio del corte en el eje y. |
| swidth | Opcional. Ancho de la imagen cortada. |
| sheight | Opcional. Altura de la imagen cortada. |
| x | Posición en el lienzo de la imagen en el eje x. |
| y | Posición y en el lienzo de la imagen en el eje y. |
| width | Opcional. Ancho de la imagen a usar. (Estirar o reducir la imagen) |
| height | Opcional. Altura de la imagen a usar. (Estirar o reducir la imagen) |
Más ejemplos
Ejemplo 2
Ubicar la imagen en el lienzo y especificar el ancho y la altura de la imagen:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("tulip");
ctx.drawImage(img,10,10,240,160);
Ejemplo 3
Cortar una imagen y ubicar la parte cortada en el lienzo:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,90,130,90,80,20,20,90,80);
Ejemplo 4
Video a usar (presione el botón de reproducción para comenzar la demostración):
Cuadro de dibujo:
JavaScript (cada 20 milisegundo, el código dibuja el fotograma actual del video):
var v=document.getElementById("video1");
var c=document.getElementById("myCanvas");
ctx=c.getContext('2d');
v.addEventListener('play',function() {var i=window.setInterval(function()
{ctx.drawImage(v,0,0,270,135);},20);},false);
v.addEventListener('pause',function() {window.clearInterval(i);},false);
v.addEventListener('ended',function() {clearInterval(i);},false);
Compatibilidad del navegador
Los números en la tabla indican la versión del navegador que admite completamente la propiedad.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Notas:Internet Explorer 8 y versiones anteriores no admiten el elemento <canvas>.
