Programmieren von HTML5 -Canvas -API

Autor：Eve Cole Aktualisierungszeit：2025-04-04 20:48:02

versuchen

{

document.createelement ("canvas"). getContext ("2d");

document.getElementById ("Support"). Innerhtml = "OK";

}

fangen (e)

{

document.getElementById ("Unterstützung"). Innerhtml = E.Message;

}

</script>

Schließen Sie sich Leinwand an

// Holen Sie sich das Canvas -Element und seinen Zeichnungskontext var canvas = document.getElementById ("diagonal");

var context = canvas.getContext ("2d");

// Erstellen Sie einen Pfad mit absoluten Koordinaten

context.beginPath ();

context.moveto (70, 140);

context.lineto (140, 70);

// Zeichne diese Zeile auf Leinwand

context.stroke ();

Verwandeln

Die gleichen Effekte wie oben können durch Transformation (Skalierung, Übersetzung, Rotation) usw. erreicht werden.

Zeichnen Sie diagonale Linien durch Transformation

// Holen Sie sich das Canvas -Element und seinen Zeichnungskontext

var canvas = document.getElementById ("diagonal");

var context = canvas.getContext ("2d");

// Speichern Sie den aktuellen Zeichnungsstatus

context.save ();

// Bewegen Sie den Zeichnungskontext nach unten nach rechts

context.translate (70, 140);

// Zeichnen Sie das gleiche Zeilensegment wie das vorherige mit dem Ursprung als Ausgangspunkt

context.beginPath ();

context.moveto (0, 0);

context.lineto (70, -70);

context.stroke (); context.restore ();

Weg

Pfade in der HTML5 -Canvas -API repräsentieren jede Form, die Sie rendern möchten.

beginPath (): Egal welche Art von Grafik Sie zeichnen, das erste, was Sie anrufen müssen, ist BeginnPath. Diese einfache Funktion erfordert keine Parameter und wird verwendet, um Leinwand darüber zu informieren, dass sie mit dem Zeichnen eines neuen Diagramms beginnen soll.

MoveTo (x, y): Keine Zeichnung, verschieben Sie die aktuelle Position in die neue Zielkoordinate (x, y).

Lineto (x, y): Verschiebt nicht nur die aktuelle Position in die neue Zielkoordinate (x, y), sondern zeichnet auch eine gerade Linie zwischen den beiden Koordinaten.

Conepath (): Diese Funktion verhält sich LINETO sehr ähnlich. Der einzige Unterschied besteht darin, dass Closepath die Startkoordinate des Pfades automatisch als Zielkoordinate verwendet. Es informiert auch Leinwand, dass die derzeit gezeichnete Zahl geschlossen wurde oder einen vollständig geschlossenen Bereich gebildet hat, der für zukünftige Füllungen und Striche sehr nützlich ist.

Zeichnen Sie einen Kiefernbaum -Baldachin

Funktion createcanopypath (Kontext) {

// Zeichnen Sie den Baum -Baldachin

context.beginPath (); context.moveto (-25, -50);

context.lineto (-10, -80);

context.lineto (-20, -80);

context.lineto (-5, -110);

context.lineto (-15, -110); // Scheitelpunkt des Baumes

context.lineto (0, -140); context.lineto (15, -110);

context.lineto (5, -110);

context.lineto (20, -80);

context.lineto (10, -80);

context.lineto (25, -50);

// Schließen Sie den Startpunkt an und schließen Sie den Pfad

context.closepath ();

} Funktion Drawtrails () {

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

var context = canvas.getContext ('2d'); context.save ();

context.translate (130, 250); // Erstellen Sie einen Pfad, der den Baldachin ausdrückt

CreateCanopypath (Kontext); // Zeichnen Sie den aktuellen Pfad

context.stroke ();

context.restore ();

} window.adDeVentListener ("laden", Drawtrails, true);

Schlagstil

Der Schlaganfallmodus ermöglicht es dem Baldachin, realistischer auszusehen.

// breit die Linien

context.lineWidth = 4;

// der Übergangspunkt des glatten Pfades

context.lineJoin = 'rund';

//Farbe

context.strokestyle = '#663300';

// den aktuellen Pfad zeichnen

context.stroke ();

Stil füllen

context.fillStyle = #339900; context.fill (); Rechteck zeichnen

Wir fügen dem Baum Stämme hinzu

context.fillStyle = '#663300'; Context.FillRect (-5, -50, 10, 50); Kurve ziehen

context.save ();

context.translate (-10, 350);

context.beginPath (); // Die erste Kurve biegt sich nach oben rechts

context.moveto (0, 0);

context.quadraticcurveto (170, -50, 260, -190); // Biegen Sie nach unten nach rechts

context.quadraticcurveto (310, -250, 410, -250); // Zeichne den Pfad in einem breiten braunen Schlag

context.strokestyle = '#663300';

context.lineWidth = 20;

context.stroke ();

context.restore ();

Fügen Sie das Bild in Leinwand ein

Sie müssen warten, bis das Bild voll geladen ist, bevor es betrieben werden kann. Browser laden normalerweise Bilder asynchron, wenn das Seitenskript ausgeführt wird. Wenn Sie versuchen, das Bild auf Leinwand zu rendern, bevor es vollständig geladen ist, zeigt Canvas keine Bilder an. Achten Sie daher besonders darauf, dass das Bild vor dem Rendern geladen wird.

// das Bild laden

var bark = new Image ();

bark.src = "bark.jpg"; // Nachdem das Bild geladen wurde

bark.onload = function () {

Dractrails ();

}

Bilder zeigen:

// Füllung mit Hintergrundmuster als Hintergrundkontext. Drawimage (Rinde, -5, -50, 10, 50); Gradient

Die Verwendung von Gradienten erfordert drei Schritte:

(1) Erstellen Sie ein Gradientenobjekt

(2) Setzen Sie die Farbe für Gradientenobjekte und geben Sie die Übergangsmethode an

(3) Setzen Sie Gradienten für Füllstile oder Schlaganfallstile im Kontext

// Erstellen Sie einen horizontalen Gradienten dritter Ordnung, der als Rumpfstruktur verwendet wird

var trunkgradient = context.createlineargradient (-5, -50, 5, -50); // Die linke Kante des Stammes hat durchschnittliche braune Farbe

trunkgradient.addcolorStop (0, '#663300');

trunkgradient.addcolorStop (0.4, '#996600'); // Die Farbe der rechten Kante sollte dunkler sein

trunkgradient.addcolorStop (1, '#552200'); // Füllen Sie den Kofferraum mit Gradienten

context.FillStyle = Trunkgradient;

Context.FillRect (-5, -50, 10, 50);

// Erstellen Sie einen vertikalen Gradienten, um den Baldachin auf dem Kofferraum zu projizieren

var canopyShadow = context.createlineargradient (0, -50, 0, 0);

// Der Ausgangspunkt des Projektionsgradienten ist schwarz mit einer Transparenz von 50%

CanopyShadow.addColorStop (0, 'RGBA (0, 0, 0, 0,5)');

// Die Richtung ist vertikal nach unten, und der Gradient ändert sich schnell allmählich in sehr kurzer Entfernung außerhalb dieser Länge vollständig transparent

// Es gibt keine Projektion am Stamm des Baumes

CanopyShadow.addcolorStop (0,2, 'RGBA (0, 0, 0, 0,0)');

context.FillStyle = CanopyShadow;

Context.FillRect (-5, -50, 10, 50);

Hintergrundbild

// das Bild laden

var gravel = new Image ();

gravel.src = "gravel.jpg";

gravel.onload = function () {

Dractrails ();

} // Ersetzen Sie braune dicke Linien durch Hintergrundbilder

context.strokestyle = context.createPattrenn (Gravel, 'repeat');

context.lineWidth = 20;

context.stroke ();

Der zweite Parameter des Kontexts.CreatePatters ist der wiederholbare Marker, und der entsprechende Wert kann in Tabelle 2-1 ausgewählt werden.

Kachelmethode	Bedeutung
wiederholen	(Standard) Das Bild wird in zwei Richtungen gefliest
Wiederholung-x	Horizontale flache Fliesen
Wiederholen	Vertikale flache Fliesen
No-Repeat	Das Bild wird nur einmal angezeigt, nicht gefliest

Zoom

Skalierungsfunktionskontext.Scale (x, y): x, y repräsentiert die Werte in den beiden Dimensionen von x und y. Wenn jeder Parameter ein Bild anzeigt, übergibt er die Menge des Bildmechnee, die auf der Achse dieser Richtung vergrößert (oder reduziert) werden soll. Wenn der X -Wert 2 ist, bedeutet dies, dass alle Elemente im gezogenen Bild doppelt so groß werden. Wenn der Y -Wert 0,5 beträgt, wird das gezogene Bild die halbe Höhe.

// Zeichne den ersten Baum bei x = 130, y = 250

context.save ();

context.translate (130, 250);

Dractree (Kontext);

context.restore (); // Zeichnen Sie den zweiten Baum bei x = 260, y = 500

context.save ();

context.translate (260, 500); // Zoom in der Höhe und Breite des zweiten Baum

Context.Scale (2, 2);

Dractree (Kontext);

context.restore ();

Drehen

Drehen Sie das Bild

context.save ();

// Die Rotationswinkelparameter sind in Radians als Einheiten enthalten

context.rotate (1.57);

context.drawimage (myimage, 0, 0, 100, 100); context.restore ();

Eine Methode zur Verwendung der Transformation

// Speichern Sie den aktuellen Status

context.save (); // Der X -Wert steigt mit zunehmendem Y -Wert. Mit Hilfe einer Zugveränderung,

// kann einen schrägen Baum erzeugen, der als Schatten verwendet wird

// Nach der Anwendung der Transformation werden alle Koordinaten mit der Matrix multipliziert

context.transform (1, 0,

-0,5, 1,

, 0);

context.scale (1, 0,6); // Füllen Sie den Kofferraum mit einer schwarzen Transparenz von 20%

context.fillStyle = 'rgba (0, 0, 0, 0,2)';

context.fillRect (-5, -50, 10, 50); // den Baum mit dem vorhandenen Schatteneffekt neu streichen

CreateCanopypath (Kontext);

context.fill (); // Wiederherstellen Sie den vorherigen Canvas -Zustand wieder her

context.restore ();

Text

context.FillText (Text, x, y, maxwidth): Textinhalt, x, y Die Textposition gibt die maxwidth ein optionaler Parameter an und begrenzt die Textposition.

context.stroketext (Text, x, y, maxwidth): Textinhalt, x, y Die Textposition angibt, Maxwidth ist ein optionaler Parameter, begrenzt die Textposition.

// Text auf Leinwand zeichnen

context.save (); // Schriftgröße ist 60, Schriftart ist Auswirkung

context.font = "60px Impact"; // Farbe füllen

context.fillStyle = '#996600';

//Center

context.textalign = 'center'; // Text zeichnen

Context.FillText ('Happy Trails!', 200, 60, 400);

context.restore ();

Schatten

Schatten können über mehrere globale Kontexteigenschaften gesteuert werden

Eigentum	Wert	Bemerkung
ShadowColor	Farbwerte in jedem CSS	Transparenz (Alpha) kann verwendet werden
Shadowoffsetx	Pixelwert	Der Wert ist positiv, bewegen Sie den Schatten nach rechts; Es ist negativ, bewegen Sie den Schatten nach links
Shadowoffsety	Pixelwert	Der Wert ist positiv, bewegen Sie den Schatten nach unten; Es ist negativ, bewegen Sie den Schatten nach oben
Shadowblur	Gaußscher Fuzzy -Wert	Je größer der Wert ist, desto mehr verschwommene Ränder der Schatten

// Schwarze Farbe, 20% Transparenz

context.shadowcolor = 'rgba (0, 0, 0, 0,2)';

context.shadowOffsetX = 15;

context.shadowoffsety = -10; // leicht verschwommener Schatten

context.shadowblur = 2;

Pixeldaten

context.getImagedata (SX, SY, SW, SH): SX, XY bestimmt einen Punkt, SW: Breite, SH: Höhe.

Diese Funktion gibt drei Eigenschaften zurück: Breite Wie viele Pixel pro Zeilenhöhe Wie viele Pixel pro Spalte

Daten Eine Reihe von Arrays, die die RGBA -Werte (Werte rot, grün, blau und Transparenz) jedes von Leinwand erhaltenen Pixel enthalten.

context.putimagedata (Imagedata, DX, DY): Ermöglicht Entwicklern, eine Reihe von Bilddaten zu übergeben. DX, DY wird verwendet, um den Offset anzugeben. Bei Verwendung springt die Funktion in die angegebene Position der Leinwand, um zu aktualisieren

Zeigt eingehende Pixeldaten an.

canvas.todataurl: Die derzeit auf Leinwand angegebenen Daten können programmgesteuert erhalten werden. Die erhaltenen Daten werden im Textformat gespeichert und der Browser kann sie in ein Bild analysieren.