Welche Methoden gibt es zum Zeichnen von Bildern mit der Funktion drawImage?

Die Funktion drawImage verfügt über drei Methoden zum Zeichnen von Bildern: Zeichnen entsprechend der Größe des Originalbilds, Zeichnen gemäß der angegebenen Größe und die allgemeine Methode kann im Allgemeinen zum Zuschneiden von Bildern verwendet werden

Heute werden wir es tun Einführung der drawImage-Funktion in Canvas Die Verwendung hat eine bestimmte Referenzfunktion. Ich hoffe, sie ist für alle hilfreich

[Empfohlene Kurse: HTML5-Tutorial]

Die Funktion drawImage ist eine Methode im Canvas-Tag, ein neues Element in HTML5. Sie wird hauptsächlich zum Zeichnen, Zusammenstellen von Bildern oder zum Erstellen einfacher Animationen usw. verwendet.

drawImage() Es gibt drei Methoden, um den Effekt des Zeichnens zu erzielen

Methode eins:

Die erste Methode besteht darin, das Ganze zu kopieren Bild auf die Leinwand, platziert es am angegebenen Punkt und ordnet jedes Bildpixel einer Einheit des Leinwand-Koordinatensystems zu. Es wird entsprechend der Größe des Originalbilds gezeichnet

drawImage(image, x, y)

Beispiel: Zeichnen Sie das Bild relativ zur Position der oberen linken Ecke auf die Leinwand

<script>
var myImage=document.getElementById("myCanvas");
var cxt=myImage.getContext("2d");
var img=new Image();
img.src="images/22.jpg";
 img.onload=function(){
cxt.drawImage(img,150,150);
cxt.drawImage(img,250,250);
}
</script>

Rendering :

Methode 2:

Obwohl die zweite Methode auch das gesamte Bild auf die Leinwand kopiert, Es ermöglicht uns, die gewünschte Breite und Höhe des Bildes in Leinwandeinheiten anzugeben.

drawImage(image, x, y, width, height)

Beispiel: Größe des Bildes festlegen

<script>
var myImage=document.getElementById("myCanvas");
var cxt=myImage.getContext("2d");
var img=new Image();
img.src="images/22.jpg";
 img.onload=function(){
cxt.drawImage(img,150,150,100,100);
cxt.drawImage(img,250,250,100,100);
}
</script>

Rendering:

Methode drei:

Die dritte Methode ist völlig universell, sie ermöglicht es uns, einen beliebigen rechteckigen Bereich des Bildes anzugeben und zu kopieren sowie eine beliebige Skalierung an jede beliebige Position in der Leinwand durchzuführen

drawImage(image, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight)

Beispiel: Bild zuschneiden

<script>
var myImage=document.getElementById("myCanvas");
var cxt=myImage.getContext("2d");
var img=new Image();
img.src="images/22.jpg";
 img.onload=function(){
cxt.drawImage(img,20,30,50,50,25,25,100,100);
cxt.drawImage(img,115,115,100,100,125,125,200,200);
}
</script>

Rendering:

Zusammenfassung: Das Obige ist das Funktion „drawImage“ Ich hoffe, dieser Artikel kann Ihnen dabei helfen, die Verwendung der Funktion „drawImage“ zu erlernen.

Das obige ist der detaillierte Inhalt vonWelche Methoden gibt es zum Zeichnen von Bildern mit der Funktion drawImage?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!