drawImage lienzo HTML método ()

Para usar la imagen:

el grito

Ejemplos

Para dibujar una imagen en la parte superior de la tela:

JavaScript:

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

Trate »

Soporte para el navegador

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

Nota: 8 y versiones anteriores de Internet Explorer no son compatibles con el elemento <canvas>.

Definición y Uso

drawImage () para dibujar una imagen, vídeo o lona en el lienzo.

Ciertas porciones a drawImage () método también se puede dibujar la imagen, y / o aumentar o disminuir el tamaño de la imagen.

la sintaxis de JavaScript

Posicionamiento de la imagen en el lienzo:

la sintaxis de JavaScript:	contexto .drawImage (img, x, y);

Posicionamiento de la imagen en el lienzo, y una anchura predeterminada y la altura de la imagen:

la sintaxis de JavaScript:	contexto .drawImage (img, x, y, anchura, altura);

Cortar la imagen y localizar la parte cortada sobre lienzo:

la sintaxis de JavaScript:	contexto .drawImage (img, sx, sy, swidth, sheight, x, y, ancho, altura);

parámetro Valor

参数	描述
img	规定要使用的图像、画布或视频。
sx	可选。开始剪切的 x 坐标位置。
sy	可选。开始剪切的 y 坐标位置。
swidth	可选。被剪切图像的宽度。
sheight	可选。被剪切图像的高度。
x	在画布上放置图像的 x 坐标位置。
y	在画布上放置图像的 y 坐标位置。
width	可选。要使用的图像的宽度（伸展或缩小图像）。
height	可选。要使用的图像的高度（伸展或缩小图像）。

más ejemplos

Ejemplos

En el lienzo de la imagen posicionamiento, a continuación, especifique 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);

Trate »

Ejemplos

Cortar la imagen, y en el lienzo de las porciones cortadas se colocan:

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);

Trate »