HTML5 Bild zeichnen auf dem Canvas

HTML5 Der Canvas zeichnet Bilder mit drawImage(). Bevor ein Bild auf dem Canvas gezeichnet wird, muss ein Image-Objekt erstellt und das Bild in den Speicher geladen werden.

HTML5Der Canvas bietet Optionen, um Bilder darauf zu zeichnen. Sie können drawImage() verwenden:2Diverse Funktionen auf dem Kontextobjekt des Canvas werden verwendet, um diese Aktion auszuführen. Es gibt drei verschiedene drawImage()-Funktionen:

drawImage(image, dx, dy);
drawImage(image, dx, dy, dw, dh);
drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh);

Der erste Parameter image ist das zu zeichnende Bild. In einem späteren Abschnitt dieses Dokuments wird erläutert, wie ein Bild erstellt und geladen wird.
Die Parameter dx und dy sind kurz für "destinationX" und "destinationY". Diese Parameter bestimmen die Position des Bildes auf dem Canvas.
Die Parameter dw und dh sind kurz für "destinationWidth" und "destinationHeight". Diese Parameter bestimmen die Größe des Bildes bei der Zeichnung.
Die Parameter sx und sy sind kurz für "sourceX" und "sourceY". Diese Parameter bestimmen, von welchem Punkt im Quellbild der Rechteckbereich auf den Canvas kopiert wird.
Die Parameter sw und sh sind kurz für "sourceWidth" und "sourceHeight"

Erstellen und Laden eines Bildes

Bevor Sie ein Bild auf dem Canvas zeichnen, müssen Sie ein Image-Objekt erstellen und das Bild in den Speicher laden. Dies ist eine Methode, die mit JavaScript durchgeführt wird:

var image = new Image();
image.src = "https://de.oldtoolbag.com/en/run/html/canvas-shot.png";

muss das Bild vollständig geladen sein, bevor es gezeichnet werden kann. Um zu bestimmen, ob das Bild vollständig geladen ist, fügen Sie einen Event-Listener auf das Bild hinzu. Der Event-Listener wird bei der Ladezeit des Bildes aufgerufen. Es sieht so aus:

image.addEventListener(' load' drawImage1);

Das drawImage1Die Parameter sind die Funktionen, die bei der Auslösung eines Ereignisses aufgerufen werden.
Dies ist ein vollständiger Beispielcode, der auf dem Canvas erstellt, geladen und ein Bild gezeichnet werden kann:

window.onload = function() {
　　　　drawEx1();
}
var image1　= null;
function drawEx1() {
　　　　image1　= new Image();
　　　　image1.src =
　　　　　　　　"https://de.oldtoolbag.com/en/run/html/canvas-shot.png";
　　　　image1.addEventListener(' load' drawImage1);
}
function drawImage1() {
　　　　var canvas = document.getElementById("ex1");
　　　　var context = canvas.getContext("2d");
　　　　context.drawImage(image1,　10,　10);
}

Dies ist das Ergebnis des obigen Codes beim Zeichnen auf dem Canvas:

HTML5 Canvas wird nicht unterstützt

Bild skalieren

Wie am Anfang dieses Dokuments erwähnt, können Sie das Bild bei der Zeichnung skalieren. Dies ist ein Beispielcode, der ein Bild zeichnet und es auf die Skala2Breite in 00 und10Höhe in Pixel:

var width =　200;
var height =　100;
context.drawImage(image2,　10,　10, width, height);

Das ist das Erscheinungsbild des Bildes auf der Leinwand beim Zeichnen, mit skalierten Breite und Höhe:

HTML5 Canvas wird nicht unterstützt

Ein Teil des Bildes zeichnen

Es kann nur ein Teil des Bildes auf die Leinwand gezeichnet werden. Der gezeichnete Teil ist ein Rechteck, das aus dem Bild kopiert wird. Hier ist ein Beispielcode:

var dx =　10;
var dy =　10;
var dw =　75;
var dh =　75;
var sx =　20;
var sy =　20;
var sw =　75;
var sh =　75;
context.drawImage(image3, sx, sy, sw, sh, dx, dy, dw, dh);

Die Parameter sind sx, sy, sw und sh (sx, sy ist der Startpunkt des Rechtecks) Bild, und Breite (sw) und Höhe (sh) des Rechtecks.

Das ist das Erscheinungsbild des Bildrechtecks auf der Leinwand beim Zeichnen:

HTML5 Canvas wird nicht unterstützt