HTML canvas drawImage() methode

HTML5 Canvas reference manual

Definitie en gebruik

drawImage() De methode tekent een afbeelding, canvas of video op het canvas.

drawImage() De methode kan ook bepaalde delen van een afbeelding tekenen, evenals / of de grootte van het beeld vergroten of verkleinen.

Voorbeeld

Voorbeeld 1

Te gebruiken afbeelding:

tulip

Teken een afbeelding 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("tulip");
ctx.drawImage(img, 10, 10);

Try it yourself

Tip:Meer voorbeelden zijn beschikbaar aan de onderkant van de pagina.

Syntaxis

JavaScript syntaxis 1

Plaats het beeld op het bord:

context.drawImage(img,x,y);

JavaScript syntaxis 2

Plaats het beeld op het bord en specificeer de breedte en hoogte van het beeld:

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

JavaScript syntaxis 3

Knip het beeld en plaats het gecombineerde deel op het bord:

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

Parameterwaarde

Parameter Beschrijving
img Specificeer het te gebruiken beeld, bord of video.
sx Optioneel. X-coördinaat van het begin van het knippen.
sy Optioneel. Y-coördinaat van het begin van het knippen.
swidth Optioneel. Breedte van het gecombineerde beeld.
sheight Optioneel. Hoogte van het gecombineerde beeld.
x X-coördinaat van de positie van het beeld op het bord.
y Y-coördinaat van de positie van het beeld op het bord.
width Optioneel. Breedte van het te gebruiken beeld. (Strek of verklein het beeld)
height Optioneel. Hoogte van het te gebruiken beeld. (Strek of verklein het beeld)

Meer voorbeelden

Voorbeeld 2

Plaats het beeld op het bord en specificeer de breedte en hoogte van het beeld:

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 het beeld en plaats het gecombineerde 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 milliseconde tekent de code het huidige frame van de 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 to fully support 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.

HTML5 Canvas reference manual