Canvas drawImage() 方法

Canvas reference manual

定义和用法

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

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

实例

例子1

要使用的图片：

tulip

向画布上面绘制图片：

Uw browser ondersteunt de HTML5 canvas tag niet.

JavaScript:

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

Try it yourself

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

语法

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

参数值

参数 Beschrijving
img Specificeer het te gebruiken beeld, bord of video.
sx Optioneel. X-coördinaatpositie van het begin van het knippen.
sy Optioneel. Y-coördinaatpositie van het begin van het knippen.
swidth Optioneel. Breedte van het afgebeelde beeld.
sheight Optioneel. Hoogte van het afgebeelde beeld.
x X-coördinaatpositie van het beeld op het bord.
y Y-coördinaatpositie van het beeld op het bord.
width Optioneel. Breedte van het te gebruiken beeld. (Stretch of scale het beeld)
height Optioneel. Hoogte van het te gebruiken beeld. (Stretch of scale het beeld)

Meer voorbeelden

Voorbeeld 2

Plaats een afbeelding op het bord en specificeer de breedte en hoogte van de afbeelding:

Uw browser ondersteunt de HTML5 canvas tag niet.

JavaScript:

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

Try it yourself

Voorbeeld 3

Knip een afbeelding en plaats het gecutte deel op het bord:

Uw browser ondersteunt de HTML5 canvas tag niet.

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

Try it yourself

Voorbeeld 4

Te gebruiken video (druk op de play knop om de demonstratie te starten):

Bord:

Uw browser ondersteunt de HTML5 canvas tag niet.

JavaScript (elke 20 millisecond, de code tekent het huidige frame van het 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);

Try it yourself

Browser support

The numbers in the table indicate the first browser version that fully supports this property.

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

Note:Internet Explorer 8 and earlier versions do not support the <canvas> element.

Canvas reference manual