Canvas drawImage() 方法

Canvas referencemanual

定义和用法

drawImage() 方法在画布上绘制图像、画布或视频。

drawImage() 方法也能够绘制图像的某些部分，以及/或者增加或减少图像的尺寸。

实例

例子1

要使用的图片：

tulip

向画布上面绘制图片：

Din browser understøtter ikke HTML5 canvas tagget.

JavaScript:

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

Prøv det selv

提示：页面底部提供更多实例。

语法

JavaScript语法1

在画布上定位图像：

context.drawImage(img,x,y);

JavaScript语法2

在画布上定位图像，并规定图像的宽度和高度：

context.drawImage(img,x,y,width,height);

JavaScript语法3

剪切图像，并在画布上定位被剪切的部分：

context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

参数值

参数 Beskrivelse
img Angiv det billede，billedkassen eller videoen，der skal bruges.
sx Valgfri. x-koordinaten for start af skæring.
sy Valgfri. y-koordinaten for start af skæring.
swidth Valgfri. Bredden på det skårne billede.
sheight Valgfri. Højden på det skårne billede.
x x-koordinaten for billedets placering på billedkassen.
y y-koordinaten for billedets placering på billedkassen.
width Valgfri. Billedets bredde，der skal bruges. (Udvid ellerformindsk billedet)
height Valgfri. Billedets højde，der skal bruges. (Udvid ellerformindsk billedet)

Flere eksempler

Eksempel 2

定位 billedet på billedkassen og angiv billedets bredde og højde：

Din browser understøtter ikke HTML5 canvas tagget.

JavaScript:

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

Prøv det selv

Eksempel 3

Skær et billede ud og定位 det skårne område på billedkassen：

Din browser understøtter ikke HTML5 canvas tagget.

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

Prøv det selv

Eksempel 4

At bruge videoen（tryk på afspilningsknappen for at starte demonstrationen）：

Billedkasse：

Din browser understøtter ikke HTML5 canvas tagget.

JavaScript （每 20 毫秒，代码就会绘制视频的当前帧）：

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

Prøv det selv

Browserstøtte

Tallene i tabellen angiver den første browserversion, der fuldt ud understøtter egenskaben.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

Bemærk:Internet Explorer 8 og tidligere versioner understøtter ikke <canvas>-elementet.

Canvas referencemanual