Imagen a utilizar:
Ejemplo
Dibujar la imagen en el lienzo:
JavaScript:
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 del 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() | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
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.
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 recorte | Juegalo " |
| sy | Opcional. La coordenada y por dónde empezar recorte | 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 (stretch or reduce the image) | Juegalo " |
| height | Opcional. La altura de la imagen a utilizar (stretch or reduce the image) | Juegalo " |
Más ejemplos
Ejemplo
Posicionar la imagen en el lienzo, y especificar la anchura y la altura de la imagen:
JavaScript:
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:
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 (press Play to start the demonstration) :
Lona:
JavaScript (el código dibuja el cuadro actual del video cada 20 milisegundos):
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,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 " <Objeto Canvas