JS Canvas-Oberfläche und Animationseffekte

Überblick

Das <canvas>-Element wird zum Generieren von Bildern verwendet. Es selbst ist wie eine Leinwand und JavaScript generiert Bilder darauf, indem es seine API bedient. Die zugrunde liegende Struktur besteht aus Pixeln und <canvas> ist im Grunde eine Bitmap, die mit JavaScript bearbeitet werden kann.

Der Unterschied zu SVG-Bildern besteht darin, dass <canvas> ein Skript ist, das verschiedene Methoden zum Generieren von Bildern aufruft, während SVG eine XML-Datei ist, die Bilder durch verschiedene Unterelemente generiert.

Bevor Sie die Canvas-API verwenden, müssen Sie ein neues <canvas>-Element auf der Webseite erstellen.

<canvas id="myCanvas" width="400" height="250">
  Ihr Browser unterstützt Canvas nicht!
</Leinwand>

Wenn der Browser diese API nicht unterstützt, wird in der Mitte des <canvas>-Tags der Text angezeigt: „Ihr Browser unterstützt Canvas nicht“.

Jedes <canvas>-Element hat ein entsprechendes CanvasRenderingContext2D-Objekt (Kontextobjekt). Die Canvas-API ist auf diesem Objekt definiert.

var canvas = document.getElementById("meineCanvas");
var ctx = canvas.getContext("2d");

Im obigen Code gibt die Methode getContext() des Elementknotenobjekts <canvas> das CanvasRenderingContext2D-Objekt zurück.

Beachten Sie, dass die Canvas-API erfordert, dass die Methode getContext den Parameter 2d angibt, was bedeutet, dass der <canvas>-Knoten ein flaches 2D-Bild generiert. Wenn der Parameter „webgl“ ist, bedeutet dies, dass er zum Generieren von 3D-Stereomustern verwendet wird, was zur WebGL-API gehört.

Je nach Verwendungszweck ist die Canvas-API in zwei Teile unterteilt: Zeichnen von Grafiken und Bildverarbeitung.

Canvas API: Grafiken zeichnen

Die Canvas-Leinwand bietet einen ebenen Raum zum Zeichnen und jeder Punkt in diesem Raum hat seine eigenen Koordinaten. Der Ursprung (0, 0) befindet sich in der oberen linken Ecke des Bildes, die positive Richtung der x-Achse befindet sich rechts vom Ursprung und die positive Richtung der y-Achse befindet sich unten am Ursprung.

Weg

Die folgenden Methoden und Eigenschaften werden zum Zeichnen von Pfaden verwendet.

• CanvasRenderingContext2D.beginPath(): beginnt mit dem Zeichnen des Pfads.
• CanvasRenderingContext2D.closePath(): Beendet den Pfad und kehrt zum Startpunkt des aktuellen Pfads zurück. Vom aktuellen Punkt zum Startpunkt wird eine gerade Linie gezeichnet. Wenn die Form bereits geschlossen ist oder nur einen Punkt hat, hat diese Methode keine Wirkung.
• CanvasRenderingContext2D.moveTo(): ​​Legt den Startpunkt des Pfads fest, d. h. verschiebt den Startpunkt eines neuen Pfads zur Koordinate (x, y).
• CanvasRenderingContext2D.lineTo(): ​​Verbindet den aktuellen Punkt mithilfe einer geraden Linie mit der (x, y)-Koordinate.
• CanvasRenderingContext2D.fill(): Füllt das Innere des Pfades mit Farbe (standardmäßig schwarz).
• CanvasRenderingContext2D.stroke(): Pfadlinienfärbung (standardmäßig schwarz).
• CanvasRenderingContext2D.fillStyle: Gibt die Farbe und den Stil der Pfadfüllung an (standardmäßig schwarz).
• CanvasRenderingContext2D.strokeStyle: Gibt die Farbe und den Stil der Pfadlinie an (standardmäßig schwarz).

var canvas = document.getElementById("meineCanvas");
var ctx = canvas.getContext("2d");

ctx.beginPath();
ctx.moveTo(100, 100);
ctx.lineTo(200, 200);
ctx.lineTo(100, 200);

Der obige Code bestimmt nur die Form des Pfades, die auf der Leinwand nicht sichtbar ist, da keine Farbe vorhanden ist. Also ist eine Färbung erforderlich.

ctx.fill();
// oder ctx.stroke();

Im obigen Code können beide Methoden den Pfad sichtbar machen. fill() füllt das Innere des Pfades mit Farbe, um eine feste Form zu erhalten; stroke() färbt nur die Pfadlinien.

Beide Methoden verwenden standardmäßig Schwarz und Sie können mit den Eigenschaften fillStyle und strokeStyle andere Farben angeben.

ctx.fillStyle = "rot";
ctx.fill();
// oder ctx.strokeStyle = "red";
ctx.stroke();

Der obige Code gibt die Füll- und Linienfarbe als Rot an.

Linientyp

Die folgenden Methoden und Eigenschaften steuern die visuellen Merkmale von Linien.

• CanvasRenderingContext2D.lineWidth: Gibt die Breite der Linie an, der Standardwert ist 1,0.
• CanvasRenderingContext2D.lineCap: Gibt den Stil des Linienendes an. Es gibt drei mögliche Werte: butt (Standardwert, das Ende ist ein Rechteck), round (das Ende ist ein Kreis) und square (das Ende ist ein hervorstehendes Rechteck mit der gleichen Breite und einer Höhe von der halben Linienbreite).
• CanvasRenderingContext2D.lineJoin: Gibt den Stil der Schnittpunkte der Liniensegmente an. Es gibt drei mögliche Werte: rund (der Schnittpunkt ist ein Fächer), abgeschrägt (der Schnittpunkt ist die Basis eines Dreiecks) und Gehrung (der Standardwert, der Schnittpunkt ist eine Raute).
• CanvasRenderingContext2D.miterLimit: Gibt die Länge der Schnittpunktraute an, der Standardwert ist 10. Dieses Attribut ist nur gültig, wenn der Wert des Attributs „lineJoin“ gleich „miter“ ist.
• CanvasRenderingContext2D.getLineDash(): Gibt ein Array zurück, das die Länge der Liniensegmente und den Abstand innerhalb der gestrichelten Linie darstellt.
• CanvasRenderingContext2D.setLineDash(): Array, das verwendet wird, um die Länge der Liniensegmente und den Abstand innerhalb der gestrichelten Linie festzulegen.

var canvas = document.getElementById("meineCanvas");
var ctx = canvas.getContext("2d");

ctx.beginPath();
ctx.moveTo(100, 100);
ctx.lineTo(200, 200);
ctx.lineTo(100, 200);

ctx.Linienbreite = 3;
ctx.lineCap = "rund";
ctx.lineJoin = "runde";
ctx.setLineDash([15, 5]);
ctx.stroke();

Im obigen Code beträgt die Linienbreite 3, die Enden und Schnittpunkte der Linien sind abgerundet und als gestrichelte Linien gesetzt.

Rechteck

Zum Zeichnen eines Rechtecks ​​wird die folgende Methode verwendet.

• CanvasRenderingContext2D.rect(): Zeichnet einen rechteckigen Pfad.
• CanvasRenderingContext2D.fillRect(): Füllt ein Rechteck.
• CanvasRenderingContext2D.strokeRect(): zeichnet einen rechteckigen Rahmen.
• CanvasRenderingContext2D.clearRect(): Alle Pixel im angegebenen rechteckigen Bereich werden transparent.

Die Formate der oben genannten vier Methoden sind gleich. Sie akzeptieren alle vier Parameter, nämlich die horizontalen und vertikalen Koordinaten der oberen linken Ecke des Rechtecks, die Breite und Höhe des Rechtecks.

Die Methode CanvasRenderingContext2D.rect() wird zum Zeichnen eines rechteckigen Pfads verwendet.

var canvas = document.getElementById("meineCanvas");
var ctx = canvas.getContext("2d");

ctx.rect(10, 10, 100, 100);
ctx.fill();

Der obige Code zeichnet ein Quadrat mit der oberen linken Ecke bei (10, 10) und einer Breite und Höhe von 100.

CanvasRenderingContext2D.fillRect() wird verwendet, um einen rechteckigen Bereich mit Farbe zu füllen.

var canvas = document.getElementById("meineCanvas");
var ctx = canvas.getContext("2d");

ctx.fillStyle = "grün";
ctx.fillRect(10, 10, 100, 100);

Der obige Code zeichnet ein grünes Quadrat mit den Koordinaten (10, 10) in der oberen linken Ecke und einer Breite und Höhe von 100.

CanvasRenderingContext2D.strokeRect() wird verwendet, um den Rand eines rechteckigen Bereichs zu zeichnen.

var canvas = document.getElementById("meineCanvas");
var ctx = canvas.getContext("2d");

ctx.strokeStyle = "grün";
ctx.strokeRect(10, 10, 100, 100);

Der obige Code zeichnet ein grünes, hohles Quadrat mit den Koordinaten der oberen linken Ecke bei (10, 10) und einer Breite und Höhe von 100.

CanvasRenderingContext2D.clearRect() wird verwendet, um die Pixelfarbe des angegebenen rechteckigen Bereichs zu löschen, was dem Entfernen aller vorherigen Zeicheneffekte entspricht.

var canvas = document.getElementById("meineCanvas");
var ctx = canvas.getContext("2d");

ctx.fillRect(10, 10, 100, 100);
ctx.clearRect(15, 15, 90, 90);

Der obige Code zeichnet zuerst ein 100 x 100 großes Quadrat und löscht dann den 90 x 90 großen Bereich darin, was der Bildung eines 5 Pixel breiten Rahmens entspricht.

Bogen

Zum Zeichnen von Bögen werden die folgenden Methoden verwendet.

• CanvasRenderingContext2D.arc(): Zeichnet einen Bogen durch Angabe von Mittelpunkt und Radius.
• CanvasRenderingContext2D.arcTo(): ​​Zeichnet einen Bogen, indem zwei Tangenten und ein Radius angegeben werden.

CanvasRenderingContext2D.arc() wird hauptsächlich zum Zeichnen von Kreisen oder Sektoren verwendet.

// Format ctx.arc(x, y, Radius, Startwinkel, Endwinkel, gegen den Uhrzeigersinn);

// Beispiel ctx.arc(5, 5, 5, 0, 2 * Math.PI, true);

Die x- und y-Parameter der arc()-Methode sind die Koordinaten des Kreismittelpunkts, radius ist der Radius, startAngle und endAngle sind die Start- und Endwinkel des Sektors (ausgedrückt in Radiant) und anticlockwise gibt an, ob die Zeichnung gegen den Uhrzeigersinn (true) oder im Uhrzeigersinn (false) erfolgen soll. Dieser Parameter wird verwendet, um die Richtung des Sektors zu steuern (z. B. oberer Halbkreis oder unterer Halbkreis).

Unten sehen Sie ein Beispiel für das Zeichnen eines ausgefüllten Kreises.

var canvas = document.getElementById("meineCanvas");
var ctx = canvas.getContext("2d");

ctx.beginPath();
ctx.arc(60, 60, 50, 0, Math.PI * 2, true);
ctx.fill();

Der obige Code zeichnet einen vollständigen Kreis mit einem Radius von 50, einem Startwinkel von 0 und einem Endwinkel von 2 * PI.

Beispiel für das Zeichnen eines ausgehöhlten Halbkreises.

var canvas = document.getElementById("meineCanvas");
var ctx = canvas.getContext("2d");

ctx.beginPath();
ctx.moveTo(50, 20);
ctx.arc(100, 20, 50, 0, Math.PI, false);
ctx.stroke();

Die Methode CanvasRenderingContext2D.arcTo() wird hauptsächlich zum Zeichnen eines Bogens verwendet. Sie erfordert die Koordinaten von zwei Punkten. Der aktuelle Punkt und der erste Punkt bilden eine gerade Linie, der erste Punkt und der zweite Punkt bilden eine weitere gerade Linie. Anschließend wird ein Bogen gezeichnet, der die beiden geraden Linien tangiert.

var canvas = document.getElementById("meineCanvas");
var ctx = canvas.getContext("2d");

ctx.beginPath();
ctx.moveTo(0, 0);
ctx.arcTo(50, 50, 100, 0, 25);
ctx.lineTo(100, 0);
ctx.stroke();

Im obigen Code hat arcTo() 5 Parameter. Die ersten beiden Parameter sind die Koordinaten des ersten Punkts, der dritte und vierte Parameter sind die Koordinaten des zweiten Punkts und der fünfte Parameter ist der Radius. Dann bilden (0, 0) und (50, 50) eine Gerade, und dann bilden (50, 50) und (100, 0) eine zweite Gerade. Der Bogen ist der Teil, der diese beiden Linien tangiert.

Text

Die folgenden Methoden und Eigenschaften werden zum Zeichnen von Text verwendet.

• CanvasRenderingContext2D.fillText(): Zeichnet ausgefüllte Zeichen an der angegebenen Stelle.
• CanvasRenderingContext2D.strokeText(): Zeichnet hohle Zeichen an der angegebenen Stelle.
• CanvasRenderingContext2D.measureText(): Gibt ein TextMetrics-Objekt zurück.
• CanvasRenderingContext2D.font: Gibt die Schriftgröße und Schriftart an. Der Standardwert ist 10px sans-serif. CanvasRenderingContext2D.textAlign: Die Ausrichtung des Textes. Der Standardwert ist „Start“.
• CanvasRenderingContext2D.direction: Die Richtung des Textes. Der Standardwert ist „inherit“.
• CanvasRenderingContext2D.textBaseline: Die vertikale Position des Textes. Der Standardwert ist alphabetisch.

Die Methode fillText() wird verwendet, um ausgefüllte Zeichen an der angegebenen Position zu zeichnen.

CanvasRenderingContext2D.fillText(text, x, y [, maxBreite])

Diese Methode akzeptiert vier Parameter.

• Text: Die auszufüllende Zeichenfolge.
• x: Die horizontale Koordinate des Startpunkts des Textes in Pixeln.
• y: Die vertikale Koordinate des Startpunkts des Textes in Pixeln.
• maxWidth: Die maximale Pixelbreite des Textes. Dieser Parameter ist optional. Wenn er weggelassen wird, bedeutet dies, dass es keine Breitenbeschränkung gibt. Wenn die tatsächliche Länge des Textes den durch diesen Parameter angegebenen Wert überschreitet, versucht der Browser, ihn mit einer kleineren Schriftart zu füllen.

var canvas = document.getElementById("meineCanvas");
var ctx = canvas.getContext("2d");

ctx.fillText("Hallo Welt", 50, 50);

Der obige Code schreibt die Zeichenfolge „Hallo Welt“ an Position (50, 50).

Beachten Sie, dass die Methode fillText() keine Zeilenumbrüche unterstützt; der gesamte Text muss in einer Zeile stehen. Wenn Sie mehrere Textzeilen generieren möchten, rufen Sie die Methode fillText() einfach mehrmals auf.

Die Methode strokeText() wird zum Hinzufügen von hohlen Zeichen verwendet. Ihre Parameter sind dieselben wie bei fillText().

var canvas = document.getElementById("meineCanvas");
var ctx = canvas.getContext("2d");

ctx.strokeText("Hallo Welt", 50, 50);

Der mit den beiden oben genannten Methoden gezeichnete Text hat standardmäßig eine Größe von 10 Pixeln und ist serifenlos. Mit dem Schriftattribut können die Schrifteinstellungen geändert werden. Der Wert dieses Attributs ist eine Zeichenfolge, die mit dem CSS-Schriftattribut festgelegt werden kann.

var canvas = document.getElementById("meineCanvas");
var ctx = canvas.getContext("2d");

ctx.font = "Fett 20px Arial";
ctx.fillText("Hallo Welt", 50, 50);

Mit dem Attribut „textAlign“ wird die Ausrichtung des Textes festgelegt. Es kann die folgenden Werte annehmen.

• left: linksbündig
• right: rechtsbündig
• Mitte: zentriert
• Start: Der Standardwert, der Startpunkt ist ausgerichtet (Text von links nach rechts ist linksbündig und Text von rechts nach links ist rechtsbündig).
• Ende: Endausrichtung (Rechtsausrichtung für Text, der von links nach rechts verläuft, und Linksausrichtung für Text, der von rechts nach links verläuft).

var canvas = document.getElementById("meineCanvas");
var ctx = canvas.getContext("2d");

ctx.font = "Fett 20px Arial";
ctx.textAlign = "zentriert";
ctx.fillText("Hallo Welt", 50, 50);

Das Richtungsattribut gibt die Richtung des Textes an. Der Standardwert ist inherit, was bedeutet, dass die Einstellungen von <canvas> oder document übernommen werden. Andere Werte sind ltr (von links nach rechts) und rtl (von rechts nach links).

Die Eigenschaft textBaseline gibt die vertikale Position des Textes an und kann die folgenden Werte annehmen.

• oben: obere Ausrichtung (die Grundlinie der Buchstaben wird insgesamt nach oben verschoben).
• Hängend: Hängende Ausrichtung (die Oberkante der Buchstaben liegt auf einer geraden Linie), passend für Hindi und Tibetisch.
• Mitte: zentrierte Ausrichtung (die Mittellinien der Buchstaben liegen auf einer Geraden).
• alphabetisch: Der Standardwert, der bedeutet, dass die Buchstaben an der normalen Position des Alphabets platziert werden (der dritten Zeile des vierzeiligen Rasters).
• Ideografisch: Absteigende Ausrichtung (die Unterkanten der Buchstaben liegen auf einer geraden Linie), wird in ostasiatischen Schriften verwendet.
• unten: untere Ausrichtung (die Grundlinie der Buchstaben wird nach unten verschoben). Bei englischen Buchstaben unterscheidet sich diese Einstellung nicht von der ideografischen Einstellung.

Die Methode measureText() akzeptiert einen String als Parameter und gibt ein TextMetrics-Objekt zurück, aus dem Sie Informationen zum Parameterstring abrufen können, derzeit hauptsächlich die Breite des Textes nach dem Rendern.

var canvas = document.getElementById("meineCanvas");
var ctx = canvas.getContext("2d");

var text1 = ctx.measureText("Hallo Welt");
text.breite; // 49,46

ctx.font = "Fett 20px Arial";
text2.Breite; // 107,78

Im obigen Code hat die 10px-Zeichenfolge „Hallo Welt“ nach dem Rendern eine Breite von 49,46. Nach der Vergrößerung auf 20px beträgt die Breite 107,78.

Farbverlauf und Bildfüllungen

Die folgenden Methoden werden zum Einstellen von Verlaufseffekten und Bildfülleffekten verwendet.

• CanvasRenderingContext2D.createLinearGradient(): definiert einen linearen Farbverlaufsstil.
• CanvasRenderingContext2D.createRadialGradient(): definiert den radialen Farbverlaufsstil.
• CanvasRenderingContext2D.createPattern(): definiert den Bildfüllstil.

Die Methode createLinearGradient() generiert einen linearen Farbverlaufsstil entsprechend einer gegebenen geraden Linie.

ctx.createLinearGradient(x0, y0, x1, y1);

Die Methode ctx.createLinearGradient(x0, y0, x1, y1) akzeptiert vier Parameter: x0 und y0 sind die horizontalen und vertikalen Koordinaten des Startpunkts und x1 und y1 sind die horizontalen und vertikalen Koordinaten des Endpunkts. Durch die Verwendung unterschiedlicher Koordinatenwerte können Sie einen Farbverlauf von oben nach unten, von links nach rechts usw. erzeugen.

Der Rückgabewert dieser Methode ist ein CanvasGradient-Objekt, das nur eine addColorStop()-Richtung hat, die verwendet wird, um die Farbe des Gradientenpunkts anzugeben. Die Methode addColorStop() akzeptiert zwei Parameter. Der erste Parameter ist eine Position zwischen 0 und 1, wobei 0 den Startpunkt und 1 den Endpunkt darstellt. Der zweite Parameter ist eine Zeichenfolge, die die CSS-Farbe darstellt.

var canvas = document.getElementById("meineCanvas");
var ctx = canvas.getContext("2d");

var gradient = ctx.createLinearGradient(0, 0, 200, 0);
gradient.addColorStop(0, "grün");
gradient.addColorStop(1, "weiß");
ctx.fillStyle = Farbverlauf;
ctx.fillRect(10, 10, 200, 100);

Im obigen Code wird nach der Definition des Farbverlaufsstils dieser Stil dem Attribut fillStyle zugewiesen. Anschließend generiert fillRect () einen rechteckigen Bereich, der mit diesem Stil gefüllt ist.

Die Methode createRadialGradient() definiert einen radialen Farbverlauf und erfordert die Angabe von zwei Kreisen.

ctx.createRadialGradient(x0, y0, r0, x1, y1, r1);

Die Methode createRadialGradient() akzeptiert sechs Parameter: x0 und y0 sind die Mittelpunktskoordinaten des Kreises, in dem die Strahlung beginnt, r0 ist der Radius des Startkreises, x1 und y1 sind die Mittelpunktskoordinaten des Kreises, in dem die Strahlung endet, und r1 ist der Radius des Endkreises.

Der Rückgabewert dieser Methode ist ebenfalls ein CanvasGradient-Objekt.

var canvas = document.getElementById("meineCanvas");
var ctx = canvas.getContext("2d");

var gradient = ctx.createRadialGradient(100, 100, 50, 100, 100, 100);
gradient.addColorStop(0, "weiß");
gradient.addColorStop(1, "grün");
ctx.fillStyle = Farbverlauf;
ctx.fillRect(0, 0, 200, 200);

Im obigen Code wird nach dem Generieren des radialen Musters ein Rechteck mit diesem Muster gefüllt.

Die Methode createPattern() definiert ein Bildfüllmuster, das das Bild in der angegebenen Richtung wiederholt, um den angegebenen Bereich zu füllen.

ctx.createPattern(Bild, Wiederholung);

Diese Methode akzeptiert zwei Parameter. Der erste Parameter sind die Bilddaten, die ein <img>-Element, ein weiteres <canvas>-Element oder ein Blob-Objekt sein können, das das Bild darstellt. Der zweite Parameter ist eine Zeichenfolge mit vier möglichen Werten: repeat (bidirektionale Wiederholung), repeat-x (horizontale Wiederholung), repeat-y (vertikale Wiederholung) und no-repeat (keine Wiederholung). Wenn das zweite Argument eine leere Zeichenfolge oder null ist, ist es gleichwertig mit null.

Der Rückgabewert dieser Methode ist ein CanvasPattern-Objekt.

var canvas = document.getElementById("meineCanvas");
var ctx = canvas.getContext("2d");

var img = neues Bild();
img.src = "upload/2022/web/pattern.png";
img.onload = Funktion() {
  var Muster = ctx.createPattern(img, "wiederholen");
  ctx.fillStyle = Muster;
  ctx.fillRect(0, 0, 400, 400);
};

Im obigen Code wird nach dem erfolgreichen Laden des Bildes mit createPattern() der Bildstil generiert und anschließend der angegebene Bereich mit diesem Stil ausgefüllt.

Schatten

Die folgenden Eigenschaften werden zum Festlegen von Schatten verwendet.

• CanvasRenderingContext2D.shadowBlur: Die Unschärfe des Schattens. Der Standardwert ist 0.
• CanvasRenderingContext2D.shadowColor: Die Farbe des Schattens, der Standard ist Schwarz.
• CanvasRenderingContext2D.shadowOffsetX: Die horizontale Verschiebung des Schattens, der Standardwert ist 0.
• CanvasRenderingContext2D.shadowOffsetY: Die vertikale Verschiebung des Schattens, der Standardwert ist 0.

Hier ist ein Beispiel.

var canvas = document.getElementById("meineCanvas");
var ctx = canvas.getContext("2d");

ctx.shadowOffsetX = 10;
ctx.shadowOffsetY = 10;
ctx.shadowBlur = 5;
ctx.shadowColor = "rgba(0,0,0,0,5)";

ctx.fillStyle = "grün";
ctx.fillRect(10, 10, 100, 100);

Canvas-API: Bildverarbeitung

CanvasRenderingContext2D.drawImage()

Mit der Canvas-API können Sie Bilddateien auf die Leinwand schreiben, indem Sie das Bild lesen und dann die Methode drawImage() verwenden, um das Bild auf der Leinwand zu platzieren.

CanvasRenderingContext2D.drawImage() hat drei Verwendungsformate.

ctx.drawImage(Bild, dx, dy);
ctx.drawImage(Bild, dx, dy, dBreite, dHöhe);
ctx.drawImage(Bild, sx, sy, sBreite, sHöhe, dx, dy, dBreite, dHöhe);

Die Bedeutung der einzelnen Parameter ist wie folgt.

• Bild: Bildelement
• sx: Die horizontale Koordinate innerhalb des Bildes, die zum Zuordnen zum Platzierungspunkt auf der Leinwand verwendet wird.
• sy: Die vertikale Koordinate innerhalb des Bildes, die zum Zuordnen zum Platzierungspunkt auf der Leinwand verwendet wird.
• sWidth: Die Breite des Bildes auf der Leinwand, die einen Skalierungseffekt erzeugt. Wenn nicht angegeben, wird das Bild nicht skaliert und nimmt die gesamte Breite der Leinwand ein.
• sHeight: Die Höhe des Bildes auf der Leinwand, die einen Skalierungseffekt erzeugt. Wenn nicht angegeben, wird das Bild nicht skaliert und nimmt die tatsächliche Höhe der Leinwand ein.
• dx: Die horizontale Koordinate innerhalb der Leinwand, die verwendet wird, um die obere linke Ecke des Bildes zu platzieren
• dy: Die vertikale Koordinate innerhalb der Leinwand, die verwendet wird, um die obere rechte Ecke des Bildes zu platzieren
• dWidth: Die Breite des Bildes innerhalb der Leinwand, die einen Skalierungseffekt erzeugt.
• dHeight: Die Höhe des Bildes innerhalb der Leinwand, die einen Skalierungseffekt erzeugt.

Nachfolgend sehen Sie das einfachste Anwendungsszenario. Dabei wird das Bild auf der Leinwand platziert und die oberen linken Ecken der beiden ausgerichtet.

var canvas = document.getElementById("meineCanvas");
var ctx = canvas.getContext("2d");

var img = neues Bild();
img.src = "bild.png";
img.onload = Funktion() {
  ctx.drawImage(img, 0, 0);
};

Der obige Code fügt ein PNG-Bild in die Leinwand ein. Zu diesem Zeitpunkt hat das Bild seine Originalgröße. Wenn die Leinwand kleiner als das Bild ist, wird nur die obere linke Ecke des Bildes angezeigt, die genau die Größe der Leinwand hat.

Wenn Sie das gesamte Bild anzeigen möchten, können Sie die Breite und Höhe der Leinwand über die Breite und Höhe des Bildes festlegen.

var canvas = document.getElementById("meineCanvas");
var ctx = canvas.getContext("2d");

var image = neues Bild(60, 45);
image.onload = TatsächlicheBildgröße zeichnen;
image.src = "upload/2022/web/bild.jpg";

Funktion drawImageActualSize() {
  canvas.width = diese.natürlicheBreite;
  canvas.height = diese.natürlicheHöhe;
  ctx.drawImage(dieses, 0, 0, diese.natürlicheBreite, diese.natürlicheHöhe);
}

Im obigen Code wird die Größe des <canvas>-Elements auf die Originalgröße des Bildes eingestellt, wodurch sichergestellt wird, dass das Bild vollständig angezeigt werden kann. Da die Originalgröße des Bildes erst abgerufen werden kann, nachdem das Bild erfolgreich geladen wurde, muss die Anpassung der Leinwandgröße in der Abhörfunktion image.onload erfolgen.

Pixel lesen und schreiben

Die folgenden drei Methoden beziehen sich auf das Lesen und Schreiben von Pixeln.

• CanvasRenderingContext2D.getImageData(): Liest die Leinwand als ImageData-Objekt
• CanvasRenderingContext2D.putImageData(): Schreibt ein ImageData-Objekt auf die Leinwand
• CanvasRenderingContext2D.createImageData(): Generiert ein ImageData-Objekt

(1) getImageData()

Die Methode CanvasRenderingContext2D.getImageData() wird verwendet, um den Inhalt von <canvas> zu lesen und ein ImageData-Objekt mit Informationen zu jedem Pixel zurückzugeben.

ctx.getImageData(sx, sy, sw, sh);

Die Methode getImageData() akzeptiert vier Parameter. sx und sy sind die Koordinaten der oberen linken Ecke des Lesebereichs und sw und sh sind die Breite und Höhe des Lesebereichs. Wenn Sie den gesamten <canvas>-Bereich lesen möchten, können Sie es wie folgt schreiben.

var canvas = document.getElementById("meineCanvas");
var ctx = canvas.getContext("2d");

var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);

Die Methode getImageData() gibt ein ImageData-Objekt zurück. Dieses Objekt hat drei Eigenschaften.

• ImageData.data: Ein eindimensionales Array. Die Werte dieses Arrays sind die Rot-, Grün-, Blau- und Alphakanalwerte jedes Pixels (jeder Wert reicht von 0 bis 255), daher ist die Länge dieses Arrays gleich der Pixelbreite des Bildes x der Pixelhöhe des Bildes x 4. Dieses Array ist nicht nur lesbar, sondern auch beschreibbar. Durch die Bedienung dieses Arrays kann daher der Zweck der Bildbedienung erreicht werden.
• ImageData.width: Eine Gleitkommazahl, die die Pixelbreite der Bilddaten darstellt.
• ImageData.height: Eine Gleitkommazahl, die die Pixelhöhe von ImageData darstellt.

(2) setzeBilddaten()

Die Methode CanvasRenderingContext2D.putImageData() zeichnet die Pixel des ImageData-Objekts auf die <canvas>-Leinwand. Diese Methode kann in zwei Formaten verwendet werden.

ctx.putImageData(Bilddaten, dx, dy);
ctx.putImageData(Bilddaten, dx, dy, dirtyX, dirtyY, dirtyWidth, dirtyHeight);

Diese Methode hat die folgenden Parameter.

• imagedata: Ein ImageData-Objekt, das Pixelinformationen enthält.
• dx: Die horizontale Koordinate innerhalb des <canvas>-Elements, die zum Platzieren der oberen linken Ecke des ImageData-Bildes verwendet wird.
• dy: Die vertikale Koordinate innerhalb des <canvas>-Elements, die zum Platzieren der oberen linken Ecke des ImageData-Bildes verwendet wird.
• dirtyX: Die horizontale Koordinate innerhalb des ImageData-Bilds, die als horizontale Koordinate der oberen linken Ecke des rechteckigen Bereichs auf der <Leinwand> verwendet wird. Der Standardwert ist 0.
• dirtyY: Die vertikale Koordinate innerhalb des ImageData-Bilds, die als vertikale Koordinate der oberen linken Ecke des rechteckigen Bereichs auf der <Leinwand> verwendet wird. Der Standardwert ist 0.
• dirtyWidth: Die Breite des rechteckigen Bereichs, der auf <canvas> platziert wird. Der Standardwert ist die Breite des ImageData-Bilds.
• dirtyHeight: Die Höhe des rechteckigen Bereichs, der auf <canvas> platziert wird. Der Standardwert ist die Höhe des ImageData-Bilds.

Nachfolgend sehen Sie ein Beispiel für das Zeichnen eines ImageData-Objekts auf einem <canvas>.

ctx.putImageData(Bilddaten, 0, 0);

(3) erstelleBilddaten()

Mit der Methode CanvasRenderingContext2D.createImageData() wird ein leeres ImageData-Objekt generiert, bei dem alle Pixel transparent schwarz sind (d. h. jeder Wert ist 0). Diese Methode kann in zwei Formaten verwendet werden.

ctx.createImageData(Breite, Höhe);
ctx.createImageData(Bilddaten);

Die Parameter der Methode createImageData() sind wie folgt.

• Breite: Die Breite des ImageData-Objekts in Pixeln.
• Höhe: Die Höhe des ImageData-Objekts in Pixeln.
• imagedata: Ein vorhandenes ImageData-Objekt. Der Rückgabewert ist eine Kopie dieses Objekts.

var canvas = document.getElementById("meineCanvas");
var ctx = canvas.getContext("2d");

var imageData = ctx.createImageData(100, 100);

Im obigen Code ist imageData ein 100 x 100 Pixel großer Bereich, in dem jedes Pixel transparent schwarz ist.

CanvasRenderingContext2D.save(), CanvasRenderingContext2D.restore()

Mit der Methode CanvasRenderingContext2D.save() wird der aktuelle Stil der Leinwand im Stapel gespeichert, was dem Generieren eines Stil-Snapshots im Speicher entspricht.

var canvas = document.getElementById("meineCanvas");
var ctx = canvas.getContext("2d");

ctx.speichern();

Im obigen Code erstellt save() einen Snapshot des Standardstils der Leinwand.

Die Methode CanvasRenderingContext2D.restore() stellt den Stil der Leinwand auf den letzten gespeicherten Snapshot wieder her oder hat keine Wirkung, wenn kein gespeicherter Snapshot vorhanden ist.

Kontextumgebung: Mit der Wiederherstellungsmethode wird die zuletzt gespeicherte Kontextumgebung wiederhergestellt.

var canvas = document.getElementById("meineCanvas");
var ctx = canvas.getContext("2d");

ctx.speichern();

ctx.fillStyle = "grün";
ctx.wiederherstellen();

ctx.fillRect(10, 10, 100, 100);

Der obige Code zeichnet ein Rechteck. Die Füllfarbe des Rechtecks ​​war ursprünglich auf Grün eingestellt, aber die Methode restore() macht diese Einstellung rückgängig und stellt den Stil auf den zuletzt gespeicherten Zustand (also den Standardstil) wieder her, sodass die tatsächliche Füllfarbe Schwarz (die Standardfarbe) ist.

CanvasRenderingContext2D.canvas

Die CanvasRenderingContext2D.canvas-Eigenschaft zeigt auf das <canvas>-Element, in dem sich das aktuelle CanvasRenderingContext2D-Objekt befindet. Diese Eigenschaft ist schreibgeschützt.

var canvas = document.getElementById("meineCanvas");
var ctx = canvas.getContext("2d");

ctx.canvas === Leinwand; // wahr

Bildtransformation

Die folgenden Methoden werden für Bildtransformationen verwendet.

• CanvasRenderingContext2D.rotate(): Bilddrehung
• CanvasRenderingContext2D.scale(): Bildskalierung
• CanvasRenderingContext2D.translate(): Bildübersetzung
• CanvasRenderingContext2D.transform(): Vollständige Bildtransformation durch eine Transformationsmatrix
• CanvasRenderingContext2D.setTransform(): Bricht die vorherige Bildtransformation ab

(1) drehen()

Die Methode CanvasRenderingContext2D.rotate() wird zum Drehen des Bildes verwendet. Es akzeptiert einen Bogenmaßwert als Parameter, der die Gradzahl darstellt, um die im Uhrzeigersinn gedreht werden soll.

var canvas = document.getElementById("meineCanvas");
var ctx = canvas.getContext("2d");

ctx.rotate((45 * Math.PI) / 180);
ctx.fillRect(70, 0, 100, 30);

Der obige Code zeigt ein um 45 Grad im Uhrzeigersinn geneigtes Rechteck an. Beachten Sie, dass die Methode rotate() vor der Methode fillRect() aufgerufen werden muss, sonst funktioniert sie nicht.

Der Rotationsmittelpunkt ist immer der Ursprung in der oberen linken Ecke der Leinwand. Wenn Sie den Mittelpunkt ändern möchten, müssen Sie die Leinwand mit der Methode „translate()“ verschieben.

(2) Skala()

Zum Skalieren des Bildes wird die Methode CanvasRenderingContext2D.scale() verwendet. Es akzeptiert zwei Parameter, den Skalierungsfaktor in x-Achsenrichtung und den Skalierungsfaktor in y-Achsenrichtung. Standardmäßig entspricht eine Einheit einem Pixel und der Skalierungsfaktor kann die Einheit skalieren. Ein Skalierungsfaktor von 0,5 bedeutet beispielsweise eine Reduzierung der Größe auf 50 % der Originalgröße und ein Skalierungsfaktor von 10 eine Vergrößerung um das Zehnfache.

var canvas = document.getElementById("meineCanvas");
var ctx = canvas.getContext("2d");

ctx.scale(10, 3);
ctx.fillRect(10, 10, 10, 10);

Im obigen Code ist das ursprüngliche Rechteck 10 x 10 groß und wird nach der Skalierung als 100 x 30 angezeigt.

Wenn der Skalierungsfaktor 1 ist, bedeutet dies, dass das Bild überhaupt nicht skaliert wird. Wenn -1, wird die Richtung umgekehrt. ctx.scale(-1, 1) bedeutet horizontales Umdrehen und ctx.scale(1, -1) bedeutet vertikales Umdrehen.

var canvas = document.getElementById("meineCanvas");
var ctx = canvas.getContext("2d");

ctx.scale(1, -2);
ctx.font = "16px Serifen";
ctx.fillText("Hallo Welt!", 20, -20);

Der obige Code zeigt ein horizontal umgekehrtes „Hallo Welt!“ mit doppelt so großer Höhe an.

Beachten Sie, dass eine negative Skalierung im Wesentlichen ein Koordinatenumkehr ist und dass die Zielkoordinatenachse die Koordinatenachse des Ursprungs in der oberen linken Ecke der Leinwand ist.

(3) übersetzen()

Zum Übersetzen des Bildes wird die Methode CanvasRenderingContext2D.translate() verwendet. Es akzeptiert zwei Parameter, die Bewegungsdistanz entlang der x-Achse und die Bewegungsdistanz entlang der y-Achse (in Pixeln).

var canvas = document.getElementById("meineCanvas");
var ctx = canvas.getContext("2d");

ctx.translate(50, 50);
ctx.fillRect(0, 0, 100, 100);

(4) transformieren()

Die Methode CanvasRenderingContext2D.transform() akzeptiert sechs Elemente einer Transformationsmatrix als Parameter, um Deformationen wie Skalierung, Drehung, Verschiebung und Neigung durchzuführen.

Das Verwendungsformat ist wie folgt.

ctx.transform(a, b, c, d, e, f);
/*
a: horizontale Skalierung (Standardwert 1, Vielfaches einer Einheit)
b: horizontale Neigung (Standardwert 0, Einheit Radiant)
c: vertikale Neigung (Standardwert 0, Einheit Radiant)
d: vertikale Skalierung (Standardwert 1, Vielfaches von einer Einheit)
e: horizontale Verschiebung (Standardwert 0, Einheit Pixel)
f: vertikale Verschiebung (Standardwert 0, Einheit Pixel)
*/

Hier ist ein Beispiel.

var canvas = document.getElementById("meineCanvas");
var ctx = canvas.getContext("2d");

ctx.transform(2, 0, 0, 1, 50, 50);
ctx.fillRect(0, 0, 100, 100);

Im obigen Code ist die ursprüngliche Form ein Rechteck von 100 x 100, das auf ein Rechteck von 200 x 100 skaliert wird und dessen obere linke Ecke sich von (0, 0) nach (50, 50) bewegt.

Beachten Sie, dass mehrere transform()-Methoden kumulative Auswirkungen haben.

(5) setzeTransform()

Die Methode CanvasRenderingContext2D.setTransform() bricht die vorherige Grafiktransformation ab und stellt den durch diese Methode angegebenen Zustand der Leinwand wieder her. Die Parameter dieser Methode sind genau dieselben wie die der Methode transform().

var canvas = document.getElementById("meineCanvas");
var ctx = canvas.getContext("2d");

ctx.translate(50, 50);
ctx.fillRect(0, 0, 100, 100);

ctx.setTransform(1, 0, 0, 1, 0, 0);
ctx.fillRect(0, 0, 100, 100);

Im obigen Code wird die obere linke Ecke des Rechtecks, das von der ersten Methode fillRect() gezeichnet wird, von (0, 0) nach (50, 50) verschoben. Die Methode setTransform() bricht diese Transformation ab (die gezeichneten Grafiken bleiben davon unberührt) und stellt den Standardzustand der Leinwand (Transformationsrechteck 1, 0, 0, 1, 0, 0) wieder her, sodass die obere linke Ecke des zweiten Rechtecks ​​wieder auf (0, 0) zurückkehrt.

Methoden des Canvas-Elements

Zusätzlich zu den vom CanvasRenderingContext2D-Objekt bereitgestellten Methoden verfügt das <canvas>-Element selbst über eigene Methoden.

htmlCanvasElement.toDataURL()

Die Methode toDataURL() des <canvas>-Elements kann Canvas-Daten in ein Bild im Data-URI-Format konvertieren.

canvas.toDataURL(Typ, Qualität);

Die Methode toDataURL() akzeptiert zwei Parameter.

• Typ: Zeichenfolge, die das Format des Bildes angibt. Der Standardwert ist image/png, ein anderer möglicher Wert ist image/jpeg und der Chrome-Browser kann auch image/webp verwenden.
• Qualität: Eine Gleitkommazahl zwischen 0 und 1, die den Qualitätsfaktor von JPEG- und WebP-Bildern darstellt. Der Standardwert ist 0,92.

Der Rückgabewert dieser Methode ist eine Zeichenfolge im Daten-URI-Format.

Funktion ConvertCanvasToImage(canvas) {
  var image = neues Bild();
  image.src = canvas.toDataURL("bild/png");
  Bild zurückgeben;
}

Der obige Code konvertiert das <canvas>-Element in eine PNG-Daten-URI.

var fullQuality = canvas.toDataURL("image/jpeg", 0.9);
var mediumQuality = canvas.toDataURL("image/jpeg", 0.6);
var lowQuality = canvas.toDataURL("image/jpeg", 0.3);

Der obige Code konvertiert das <canvas>-Element in drei JPEG-Bilder: hohe Qualität, mittlere Qualität und niedrige Qualität.

htmlCanvasElement.toBlob()

Die Methode HTMLCanvasElement.toBlob() wird verwendet, um ein <canvas>-Bild in ein Blob-Objekt zu konvertieren. Der Standardtyp ist image/png. Das Verwendungsformat ist wie folgt.

// Format canvas.toBlob(Rückruf, MIME-Typ, Qualität)

// Beispiel canvas.toBlob(function (blob) {...}, 'image/jpeg', 0.95)

Die Methode toBlob() kann drei Parameter akzeptieren.

• Rückruf: Rückruffunktion. Es akzeptiert das resultierende Blob-Objekt als Parameter.
• mimeType: Zeichenfolge, der MIMEType-Typ des Bildes, der Standard ist image/png.
• Qualität: Eine Gleitkommazahl zwischen 0 und 1, die die Qualität des Bildes angibt. Gilt nur für Bilder vom Typ image/jpeg und image/webp.

Beachten Sie, dass diese Methode keinen Rückgabewert hat.

Das folgende Beispiel kopiert ein <canvas>-Bild in ein <img>-Bild.

var canvas = document.getElementById('meineCanvas');

Funktion blobToImg(blob) {
  var neuesImg = document.createElement('img');
  var url = URL.createObjectURL(blob);

  newImg.onload = Funktion() {
    // Nach Verwendung das URL-Objekt freigeben URL.revokeObjectURL(url);
  };

  neuesBild.src = URL;
  Dokument.Body.AppendChild(neuesBild);
}

canvas.toBlob(blobToImg);

Canvas-Anwendungsfälle

Animationseffekte

Durch Ändern der Koordinaten eines Canvas-Elements können Sie ganz einfach Animationseffekte auf diesem Element erstellen.

var canvas = document.getElementById("meineCanvas");
var ctx = canvas.getContext("2d");

var posX = 20;
var posY = 100;

setzeIntervall(Funktion() {
  ctx.fillStyle = "schwarz";
  ctx.fillRect(0, 0, Leinwandbreite, Leinwandhöhe);

  Position X + = 1;
  posY += 0,25;

  ctx.beginPath();
  ctx.fillStyle = "weiß";

  ctx.arc(posX, posY, 10, 0, Math.PI * 2, true);
  ctx.closePath();
  ctx.fill();
}, 30);

Der obige Code erzeugt einen kleinen Punkt, der sich alle 30 Millisekunden nach rechts unten bewegt. Zu Beginn der Funktion setInterval() wird die Leinwand mit einem schwarzen Hintergrund neu gerendert, um die kleinen Punkte im vorherigen Schritt zu löschen.

Basierend auf diesem Beispiel können durch Festlegen der Koordinaten des Kreismittelpunkts verschiedene Bewegungstrajektorien erzeugt werden. Unten sehen Sie ein Beispiel für eine Aufwärtsbewegung, gefolgt von einer Abwärtsbewegung.

var vx = 10;
var vy = -10;
var Schwerkraft = 1;

setzeIntervall(Funktion() {
  posX += vx;
  posY += vy;
  vy += Schwerkraft;
  // ...
});

Im obigen Code nimmt die x-Koordinate ständig zu, was auf eine kontinuierliche Bewegung nach rechts hinweist. Die y-Koordinate wird zunächst kleiner und nimmt dann unter der Einwirkung der Schwerkraft weiter zu, was bedeutet, dass sie zuerst steigt und dann fällt.

Pixelverarbeitung

Durch die Methoden GetImagedata () und Putimagedata () können Sie jedes Pixel verarbeiten und den Bildinhalt manipulieren, damit Sie das Bild neu schreiben können.

Das Folgende ist eine allgemeine Art, Bildverarbeitung zu schreiben.

if (canvas.width> 0 && canvas.height> 0) {
  var imagedata = context.getImagedata (0, 0, canvas.width, canvas.height);
  Filter (Imagedata);
  context.putimagedata (Imagedata, 0, 0);
}

Im obigen Code ist Filter eine Funktion, die Pixel verarbeitet. Das Folgende sind einige gemeinsame Filter.

(1) Graustufeneffekt

Graustufen ist der arithmetische Durchschnitt der rot-, grünen und blauen Pixelwerte, die das Bild tatsächlich in Schwarz und Weiß umwandeln.

grayscale = function (pixel) {
  var d = pixel.data;
  für (var i = 0; i <d.length; i += 4) {
    var r = d [i];
    var g = d [i + 1];
    var b = d [i + 2];
    d [i] = d [i + 1] = d [i + 2] = (r + g + b) / 3;
  }
  Pixel zurückgeben;
};

Im obigen Code ist D [i] der rote Wert, D [i+1] der grüne Wert, D [i+2] der blaue Wert und D [i+3] der Alpha -Kanalwert. Der Algorithmus zur Konvertierung in Graustufen besteht darin, die roten, grünen und blauen Werte hinzuzufügen, durch 3 zu teilen und dann das Ergebnis zurück zum Array zu schreiben.

(2) Retro -Effekt

Der Sepia-Effekt besteht darin, einen gewichteten Durchschnitt der roten, grünen bzw. blauen Werte zu nutzen, was dem Bild einen altmodischen Effekt verleiht.

sepia = function (pixel) {
  var d = pixel.data;
  für (var i = 0; i <d.length; i += 4) {
    var r = d [i];
    var g = d [i + 1];
    var b = d [i + 2];
    D [i] = R * 0,393 + G * 0,769 + B * 0,189;
    D [i + 1] = R * 0,349 + G * 0,686 + B * 0,168;
    D [i + 2] = R * 0,272 + G * 0,534 + B * 0,131;
  }
  Pixel zurückgeben;
};

(3) rote Maskeneffekt

Die rote Maske lässt das Bild rötlich erscheinen. Der Algorithmus soll den roten Kanal auf den Durchschnitt der roten, grünen und blauen Werte einstellen und die grünen und blauen Kanäle auf 0 setzen.

var rot = function (pixel) {
  var d = pixel.data;
  für (var i = 0; i <d.length; i += 4) {
    var r = d [i];
    var g = d [i + 1];
    var b = d [i + 2];
    d [i] = (r + g + b) / 3;
  }
  Pixel zurückgeben;
};

(4) Helligkeitseffekt

Helligkeitseffekt bezieht sich auf ein Bild heller oder dunkler. Der Algorithmus verleiht gleichzeitig einen positiven oder negativen Wert für den roten Kanal, den grünen Kanal und den blauen Kanal.

var hellness = function (pixel, delta) {
  var d = pixel.data;
  für (var i = 0; i <d.length; i += 4) {
    D [i] += Delta;
    D [i + 1] + = Delta;
    D [i + 2] + = Delta;
  }
  Pixel zurückgeben;
};

(5) Umkehreffekt

Der Invert -Effekt (Invert) bedeutet, dass das Bild einen Effekt von umgekehrten Farben aufweist. Der Algorithmus besteht darin, den entgegengesetzten Wert jeder der roten, grünen und blauen Kanäle (255 - ursprünglicher Wert) zu nehmen.

invert = function (pixel) {
  var d = pixel.data;
  für (var i = 0; i <d.length; i += 4) {
    D [i] = 255 - D [i];
    d [i + 1] = 255 - d [i + 1];
    d [i + 2] = 255 - d [i + 2];
  }
  Pixel zurückgeben;
};

Das obige ist der detaillierte Inhalt der JS -Canvas -Schnittstelle und der Animationseffekte.