Bild zu verwenden:
Beispiel
Zeichnen Sie das Bild auf die Leinwand:
JavaScript:
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 vollständig unterstützt.
| Methode | |||||
|---|---|---|---|---|---|
| drawImage() | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Definition und Verwendung
Die drawImage() Methode zeichnet ein Bild, Segeltuch, oder Video auf der Leinwand.
Die drawImage() Methode kann auch Teile eines Bildes zeichnen, und / oder die Erhöhung / Verringerung der Bildgröße.
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 Bildes und positionieren den abgeschnittenen 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 in dem 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, um das Bild zu platzieren | Spiel es " |
| width | Optional. Die Breite des Bildes zu verwenden (stretch or reduce the image) , (stretch or reduce the image) | Spiel es " |
| height | Optional. Die Höhe des Bildes zu verwenden (stretch or reduce the image) , (stretch or reduce the image) | Spiel es " |
Mehr Beispiele
Beispiel
Positionieren Sie das Bild auf der Leinwand, und geben Sie die Breite und Höhe des Bildes:
JavaScript:
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 Bildes und positionieren den abgeschnittenen Teil auf der Leinwand:
JavaScript:
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 (press Play to start the demonstration) Sie (press Play to start the demonstration) , um (press Play to start the demonstration) :
Segeltuch:
JavaScript (der Code zeichnet den aktuellen Frame des Videos alle 20 Millisekunden):
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,5,5,260,125)},20);},false);
v.addEventListener('pause',function() {window.clearInterval(i);},false);
v.addEventListener('ended',function() {clearInterval(i);},false); Versuch es selber " <Canvas Object