HTML canvas drawImage() metoden

HTML5 Canvas reference manual

Definition og brug

drawImage() Metoden tegner et billede, canvas eller video på canvas.

drawImage() Metoden kan også tegne bestemte dele af et billede samt/eller øge eller formindske billedets størrelse.

Eksempel

Eksempel 1

Brugt billede:

tulip

Tegn billede på toppen af tegnebrættet:

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

Tip:Flere eksempler findes i bunden af siden.

Syntaks

JavaScript syntaks 1

定位图像 på tegnebrættet:

context.drawImage(img,x,y);

JavaScript syntaks 2

定位图像 på tegnebrættet og angiv billedets bredde og højde:

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

JavaScript syntaks 3

Klip billedet og定位 på tegnebrættet det klippede område:

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

Parameter værdi

Parameter Beskrivelse
img Angiv det billede, canvas eller video, der skal bruges.
sx Valgfri. x-koordinaten for start af klipning.
sy Valgfri. y-koordinaten for start af klipning.
swidth Valgfri. Bredden på det klippede billede.
sheight Valgfri. Højden på det klippede billede.
x x-koordinaten for placeringen af billedet på tegnebrættet.
y y-koordinaten for placeringen af billedet på tegnebrættet.
width Valgfri. Billedets bredde, der skal bruges. (Stræk eller缩小图像)
height Valgfri. Billedets højde, der skal bruges. (Stræk eller缩小图像)

Flere eksempler

Eksempel 2

定位图像 på tegnebrættet 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 klip af billedet og定位 på tegnebrættet det klippede område:

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

Brugt video (tryk på afspilningstasten for at starte demonstrationen):

Tegnebræt:

Din browser understøtter ikke HTML5 canvas-tagget.

JavaScript (hver 20 millisekund, kode tegner videoens aktuelle billedramme):

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

Browser support

Tal 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.

HTML5 Canvas reference manual