HTML canvas drawImage()Método

HTML canvas 参考手册 Referencia de HTML canvas

Imagen a utilizar:

The Scream

Ejemplo

Dibujar la imagen en el lienzo:

JavaScript：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
img.onload = function(){
ctx.drawImage(img,10,10);
}

Pruébalo »

Soporte del navegador

Internet Explorer 9, Firefox, Opera, Chrome y Safari soportan el método drawImage().

Nota:Internet Explorer 8 y versiones anteriores no soportan el elemento <canvas>.

Definición y uso

El método drawImage() dibuja una imagen, un lienzo o un video en el lienzo.

El método drawImage() también puede dibujar partes de una imagen y/o aumentar o reducir el tamaño de la imagen.

Sintaxis de JavaScript

Posicionar la imagen en el lienzo:

Sintaxis de JavaScript:	context.drawImage(img,x,y);

Posicionar la imagen en el lienzo y especificar el ancho y alto de la imagen:

Sintaxis de JavaScript:	context.drawImage(img,x,y,width,height);

Recortar la 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 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. El alto 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 utilizar (estirar o reducir la imagen).
height	Opcional. El alto de la imagen a utilizar (estirar o reducir la imagen).

Más ejemplos

Ejemplo

Posicionar una imagen en el lienzo y luego especificar el ancho y alto de la imagen:

JavaScript：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
img.onload = function(){
ctx.drawImage(img,10,10,150,180);
}

Pruébalo »

Ejemplo

Recortar una imagen y posicionar 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);

Pruébalo »