Bild zu verwenden:
Beispiel
Zeichnen Sie das Bild auf die Leinwand:
JavaScript:
window.onload = function() {
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,10,10);
}; Versuch es selber " Browser-Unterstützung
Die Zahlen in der Tabelle geben Sie die erste Browser-Version, die die Methode in vollem Umfang unterstützt.
| Methode | |||||
|---|---|---|---|---|---|
| drawImage() | ja | 9.0 | ja | ja | ja |
Definition und Verwendung
Die drawImage() Methode zeichnet ein Bild, Leinwand oder Video auf die Leinwand.
Die drawImage() Methode kann auch Teile eines Bildes zu zeichnen, und / oder erhöhen / verringern Sie die Bildgröße.
 | Hinweis: Sie können den Anruf kann drawImage() Methode , bevor das Bild geladen wurde. Um sicherzustellen , dass das Bild geladen wurde, können Sie rufen drawImage() from window.onload() oder von document.getElementById(" imageID ").onload . |
|---|
JavaScript-Syntax
Positionieren Sie das Bild auf der Leinwand:
| JavaScript-Syntax: | context.drawImage(img,x,y); |
|---|
Positionieren Sie das Bild auf der Leinwand, und geben Sie die Breite und Höhe des Bildes:
| JavaScript-Syntax: | context.drawImage(img,x,y,width,height); |
|---|
Clip das Bild und die Position des abgehackt Teil auf der Leinwand:
| JavaScript-Syntax: | context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height); |
|---|
Parameterwerte
| Parameter | Beschreibung | Spiel es |
|---|---|---|
| img | Gibt das Bild, Leinwand oder Videoelement zu verwenden | |
| sx | Optional. Die x-Koordinate, wo Clipping zu starten | Spiel es " |
| sy | Optional. Die y-Koordinate, wo Clipping zu starten | Spiel es " |
| swidth | Optional. Die Breite des Bildes abgeschnitten | Spiel es " |
| sheight | Optional. Die Höhe des Bildes abgeschnitten | Spiel es " |
| x | Die x-Koordinate, wo auf der Leinwand das Bild eingefügt werden | Spiel es " |
| y | Die y-Koordinate, wo auf der Leinwand das Bild eingefügt werden | Spiel es " |
| width | Optional. Die Breite des Bildes zu verwenden (Dehnung oder reduzieren Sie das Bild) | Spiel es " |
| height | Optional. Die Höhe des Bildes zu verwenden (Dehnung oder reduzieren Sie das Bild) | Spiel es " |
Mehr Beispiele
Beispiel
Positionieren Sie das Bild auf der Leinwand, und geben Sie die Breite und Höhe des Bildes:
JavaScript:
window.onload = function() {
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,10,10,150,180);
}; Versuch es selber " Beispiel
Clip das Bild und die Position des abgehackt Teil auf der Leinwand:
JavaScript:
window.onload = function() {
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);
}; Versuch es selber " Beispiel
Video zu verwenden (Play-Taste drücken, die Demonstration zu starten):
Segeltuch:
JavaScript (der Code zeichnet den aktuellen Frame des Videos alle 20 Millisekunden):
var v=document.getElementById("video1");
var c=document.getElementById("myCanvas");
var ctx=c.getContext('2d');
var i;
v.addEventListener('play',function() {i=window.setInterval(function()
{ctx.drawImage(v,5,5,260,125)},20);},false);
v.addEventListener('pause',function() {window.clearInterval(i);},false);
v.addEventListener('ended',function() {clearInterval(i);},false); Versuch es selber "