Detaillierte Einführung in die Methode drawImage() des HTML5-Canvas-Zeichnens (Codebeispiel)

Dieser Artikel bietet Ihnen eine detaillierte Einführung (Codebeispiel) zur Methode drawImage() des HTML5-Canvas-Zeichnens. Ich hoffe, dass er für Sie hilfreich ist.

ist ein neues HTML-Element, das von einer Skriptsprache (normalerweise JavaScript) zum Zeichnen von Grafiken verwendet werden kann. Sie können damit beispielsweise Bilder zeichnen, Bilder zusammensetzen oder einfache (und nicht so einfache) Animationen erstellen.

1. Die häufigste Art, auf Leinwand zu zeichnen, ist die Verwendung des Image-Objekts. Die unterstützten Quellbildformate hängen von der Browserunterstützung ab. Einige typische Bildformate (PNG, JPG, GIF usw.) sind jedoch grundsätzlich kein Problem.
2. In allen folgenden Beispielen verwendet die Bildquelle dieses Bild im Format 200×200.

3. Zeichnen Sie ein Bild: Bei der einfachsten Zeichenoperation benötigen Sie lediglich die Position (X- und Y-Koordinaten), an der das Bild erscheinen soll . Die Position des Bildes wird relativ zu seiner oberen linken Ecke beurteilt. Mit dieser Methode kann das Bild einfach in Originalgröße auf die Leinwand gezeichnet werden.
4. Der Code lautet wie folgt:

var myImage=document.getElementByIdx_x("myCanvas");

var cxt=myImage.getContext("2d");

var img=new Image();

img.src="200.jpg";

cxt.drawImage(img,50,50);

5. Um die Größe des Bildes zu ändern, müssen Sie die überladene Funktion drawImage verwenden und ihm die gewünschten Breiten- und Höhenparameter geben.
6. Der Code lautet wie folgt:

var myImage=document.getElementByIdx_x("myCanvas");

var cxt=myImage.getContext("2d");

var img=new Image();

img.src="200.jpg";

cxt.drawImage(img,50,50,100,100);

7. Die Funktion der drawImage-Methode besteht darin, das Bild zuzuschneiden. drawImage(image,sourceX,sourceY,sourceWidth,sourceHeight,destX,destY,destWidth, destHeight)
8 Es gibt viele Parameter, aber im Grunde kann man es sich so vorstellen, als würde man einen rechteckigen Bereich aus dem Originalbild nehmen und darauf zeichnen den Zielbereich auf der Leinwand.
9. Der Code lautet wie folgt:
var myImage=document.getElementByIdx_x("myCanvas");

var cxt=myImage.getContext("2d");

var img=new Image();

img.src="200.jpg";

cxt.drawImage(img,0,0,50,50,25,25,100,100);

cxt.drawImage(img,125,125,100,100,125,125,150,150);

10. Dies sind die Grundlagen zum Zeichnen und Verarbeiten von Bildern im Canvas-Tag in HTML5 arbeiten.

1. Spalte
2. Artikeldetails

                                                                                       

Rote Ahornblätter                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              Gepostet vor 52 Minuten                                                                                                                                                                                16 mal gelesen                                                             Das Lesen dauert 5 Minuten                                                                                                                                                                     

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                

Einführung ist ein neues HTML-Element, das von der Skriptsprache (normalerweise JavaScript) zum Zeichnen von Grafiken verwendet werden kann. Sie können damit beispielsweise Bilder zeichnen, Bilder zusammensetzen oder einfache (und nicht so einfache) Animationen erstellen. 1. Die gebräuchlichste Methode zum Zeichnen auf Leinwand ist die Verwendung des Image-Objekts. Die unterstützten Quellbildformate hängen von der Browserunterstützung ab. Einige typische Bildformate (PNG, JPG, GIF usw.) sind jedoch grundsätzlich kein Problem. 2. In allen folgenden Beispielen verwendet die Bildquelle dieses Bild im Format 200×200.

3. Zeichnen Sie ein Bild: Bei der einfachsten Zeichenoperation benötigen Sie lediglich die Position (X- und Y-Koordinaten), an der das Bild erscheinen soll . Die Position des Bildes wird relativ zu seiner oberen linken Ecke beurteilt. Mit dieser Methode

kann das Bild einfach in Originalgröße auf die Leinwand
gezeichnet werden.

4. Der Code lautet wie folgt:

var myImage=document.getElementByIdx_x("myCanvas");

var cxt=myImage.getContext("2d");

var img=new Image();

img.src="200.jpg";

cxt.drawImage(img,50,50);

5. Um die Größe des Bildes zu ändern, müssen Sie die überladene Funktion drawImage verwenden und ihm die gewünschten Breiten- und Höhenparameter geben. 6. Der Code lautet wie folgt:

var myImage=document.getElementByIdx_x("myCanvas");

var cxt=myImage.getContext("2d");

var img=new Image();

img.src="200.jpg";

cxt.drawImage(img,50,50,100,100);

7. Die Funktion der drawImage-Methode besteht darin, das Bild zuzuschneiden. drawImage(image,sourceX,sourceY,sourceWidth,sourceHeight,destX,destY,destWidth, destHeight)

8 Es gibt viele Parameter, aber im Grunde kann man es sich so vorstellen, als würde man einen rechteckigen Bereich aus dem Originalbild nehmen und darauf zeichnen den Zielbereich auf der Leinwand.
9. Der Code lautet wie folgt:
var myImage=document.getElementByIdx_x("myCanvas");

var cxt=myImage.getContext("2d");

var img=new Image();

img.src="200.jpg";

cxt.drawImage(img,0,0,50,50,25,25,100,100);

cxt.drawImage(img,125,125,100,100,125,125,150,150);

10. Dies sind die Grundlagen für das Zeichnen und Verarbeiten von Bildern im Canvas-Tag in HTML5 arbeiten.

Bericht

• 
• Gefällt mir
  • 🎜>0

Sammlung

|

0

Sie könnten interessiert sein

Kommentare                                                                                                       

Standardsortierung Nach Zeit sortieren

Laden...

Weitere Kommentare anzeigen

Kommentar posten

Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in die Methode drawImage() des HTML5-Canvas-Zeichnens (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!