HTML Referenzhandbuch

Vollständiges Verzeichnis der HTML-Tags

HTML: <template> Tag

HTML canvas drawImage() Methode

Die drawImage() Methode bietet mehrere Möglichkeiten, ein Bild auf dem Canvas zu zeichnen.

HTML Canvas Referenzhandbuch

Zu verwendendes Bild:

Online-Beispiel

Zeichnet ein Bild auf den Canvas:

Beispiel

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Verwendung des HTML canvas drawImage() Methoden-Grund教程(oldtoolbag.com)</title>
</head>
<body>
<p>Das zu verwendende Bild:</p>
<img id="scream" src="views.png">
<p>Leinwand:</p>
<canvas id="myCanvas" width="300"height="200"style="border:1px solide #d solid3d3d3>
Ihr Browser unterstützt keine HTML5　canvas-Tag.
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d);
var img=document.getElementById("scream");
img.onload　=　function()
{
　　　　ctx.drawImage(img,10,10);
}
</script>
</body>
</html>

Testen Sie, ob ‹/›

Browserkompatibilität

IEFirefoxOperaChromeSafari

Internet Explorer 9、Firefox、Opera、Chrome und Safari unterstützen drawImage() Methode.

Hinweis:Internet Explorer 8 und frühere Versionen unterstützen das <canvas>-Element nicht.

Definition und Verwendung

Die drawImage() Methode zeichnet das Bild, Canvas oder Video auf den Canvas.

Die drawImage() Methode kann auch ein Teil des Bildes zeichnen und/oder erhöht/Verringert die Größe des Bildes.

JavaScript Syntax

Positioniert das Bild auf dem Canvas:

JavaScript Syntax:	context.drawImage(img,x,y);

Positioniert das Bild auf dem Canvas und gibt die Breite und Höhe des Bildes an:

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

Schneidet das Bild aus und positioniert das ausgeschnittene Teil auf dem Canvas:

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

Parameterwert

Parameter	Beschreibung
img	Gibt das zu verwendende Bild, Canvas oder Video an.
sx	Optional. Die x-Koordinatenposition des Anfangs des Schnitts.
sy	Optional. Die y-Koordinatenposition des Anfangs des Schnitts.
swidth	Optional. Die Breite des ausgeschnittenen Bildes.
sheight	Optional. Die Höhe des ausgeschnittenen Bildes.
x	Legt die x-Koordinatenposition des Bildes auf dem Canvas fest.
y	Die y-Koordinate der Position des Bildes auf der Leinwand.
width	Optional. Die Breite des zu verwendenden Bildes (dehnen oder verkleinern des Bildes).
height	Optional. Die Höhe des zu verwendenden Bildes (dehnen oder verkleinern des Bildes).

Online-Beispiel

Positionieren Sie das Bild auf der Leinwand und legen Sie Breite und Höhe des Bildes fest:

Beispiel

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Verwendung des HTML canvas drawImage() Methoden-Grund教程(oldtoolbag.com)</title>
</head>
<body>
<p>Das zu verwendende Bild:</p>
<img id="scream" src="views.png">
<p>Leinwand:</p>
<canvas id="myCanvas" width="250"height="300"style="border:1px solide #d solid3d3d3>
Ihr Browser unterstützt keine HTML5　canvas-Tag.
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d);
var img=document.getElementById("scream");
img.onload　=　function()
{
　　　　ctx.drawImage(img,10,10,150,180);
}
</script>
</body>
</html>

Testen Sie, ob ‹/›

Online-Beispiel

Schneiden Sie das Bild aus und positionieren Sie den geschnittenen Teil auf der Leinwand:

Beispiel

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Verwendung des HTML canvas drawImage() Methoden-Grund教程(oldtoolbag.com)</title>
</head>
<body>
<p>Bildanwendung:</p>
<img id="scream" src="views.png">
<p>Leinwand:</p>
<canvas id="myCanvas" width="300"height="150"style="border:1px solide #d solid3d3d3>
Ihr Browser unterstützt keine HTML5　canvas-Tag.
</canvas>
<script>
document.getElementById("scream").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);
};
</script>
</body>
</html>

Testen Sie, ob ‹/›

Online-Beispiel

Das zu verwendende Video (Drücken Sie die Wiedergabetaste, um die Demo zu starten):

Leinwand:

JavaScript (jeder 20 Millisekunden, der Code zeichnet das aktuelle Video-Frame):

Beispiel

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Verwendung des HTML canvas drawImage() Methoden-Grund教程(oldtoolbag.com)</title>
</head>
<body>
<p>Das zu verwendende Video:</p>
<video id="video1"controls width="270"autoplay>
　　　　<source src="movie.mp4"type='video/mp4'>
　　　　<source src="movie.ogg" type='video/ogg#39;>
　　　　<source src="movie.webm" type='video/webm#39;>
</video>
<p>Leinwand (Code in jedem20 Millisekunden wird das aktuelle Video-Frame gezeichnet):</p>
<canvas id="myCanvas" width="270"height="135"style="border:1px solide #d solid3d3d3>
Ihr Browser unterstützt keine HTML5　canvas-Tag.
</canvas>
<script>
var v=document.getElementById("video",1);
var c=document.getElementById("myCanvas");
ctx=c.getContext(&39;2d&39;);
v.addEventListener(&39;play&39;function()　
{
　　　　var i=window.setInterval(function() {ctx.drawImage(v,5,5,260,125});20);
},false);
v.addEventListener(&39;pause&39;function()　
{
　　　　window.clearInterval(i);
},false);
v.addEventListener(&39;ended&39;function()　
{
　　　　clearInterval(i);
},false);　　
</script>
</body>
</html>

Testen Sie, ob ‹/›

HTML Canvas Referenzhandbuch

HTML: <template> Tag