Ausführliche Erläuterung von Beispielen zum Einfügen von Bildern in die Leinwand in HTML5

Leinwand wird geladen...

Bilder auf der Leinwand anzuzeigen ist sehr einfach. Sie können dem Bild einen Stempel hinzufügen, das Bild strecken oder das Bild über die Korrekturebene ändern, und das Bild wird normalerweise zum Fokus auf der Leinwand. Mit ein paar einfachen Befehlen, die in die HTML5-Canvas-API integriert sind, können Sie ganz einfach Bildinhalte zur Leinwand hinzufügen.

Bilder erhöhen jedoch die Komplexität von Canvas-Vorgängen: Sie müssen warten, bis das Bild vollständig geladen ist, bevor Sie es bedienen können. Browser laden Bilder normalerweise asynchron, während das Seitenskript ausgeführt wird. Wenn Sie versuchen, das Bild auf der Leinwand zu rendern, bevor es vollständig geladen ist, wird auf der Leinwand kein Bild angezeigt. Daher sollten Entwickler besonders darauf achten, dass das Bild vor dem Rendern geladen wurde.

Um sicherzustellen, dass das Bild vor dem Rendern vollständig geladen ist, stellen wir einen Rückruf bereit, d. h. nachfolgender Code wird nur ausgeführt, wenn das Bild geladen ist, wie in der Codeliste unten gezeigt.

<script type="text/javascript">
function drawBeauty(beauty){
var mycv = document.getElementById("cv");  
var myctx = mycv.getContext("2d");
myctx.drawImage(beauty, 0, 0);
}
function load(){
var beauty = new Image();  
beauty.src = "http://images.cnblogs.com/cnblogs_com/html5test/359114/r_test.jpg"; 
if(beauty.complete){
   drawBeauty(beauty);
}else{
   beauty.onload = function(){
     drawBeauty(beauty);
   };
   beauty.onerror = function(){
     window.alert(&#39;美女加载失败，请重试&#39;);
   };
};   
}//load
if (document.all) {
  window.attachEvent(&#39;onload&#39;, load);  
  }else {  
  window.addEventListener(&#39;load&#39;, load, false);
  }
</script>

Grundlegendes Zeichnen

Beim einfachsten Zeichenvorgang 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 gemalt werden.

drawImage(image, x, y)
var canvas = document.getElementById(‘myCanvas’);
var ctx = canvas.getContext(’2d’);
ctx.drawImage(myImage, 50, 50);
ctx.drawImage(myImage, 125, 125);
ctx.drawImage(myImage, 210, 210);

Skalieren und Größe ändern

Um die Größe eines Bildes zu ändern, müssen Sie die überladene Funktion drawImage verwenden und ihr die gewünschten Parameter für Breite und Höhe zuweisen.

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

var canvas = document.getElementById(‘myCanvas’);
var ctx = canvas.getContext(’2d’);ctx.drawImage(myImage, 50, 50, 100, 100);
ctx.drawImage(myImage, 125, 125, 200, 50);
ctx.drawImage(myImage, 210, 210, 500, 500);

Bildzuschnitt

Die Funktion der letzten drawImage-Methode besteht darin, das Bild zuzuschneiden.

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

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 ihn in den Zielbereich auf der Leinwand zeichnen.

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung von Beispielen zum Einfügen von Bildern in die Leinwand in HTML5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!