Organisieren Sie einige neue Funktionen von HTML5 und gemeinsamen Eigenschaften von Leinwand

In diesem Artikel werden hauptsächlich einige neue Funktionen von HTML5 und die Sortierung gemeinsamer Eigenschaften von Leinwand eingeführt. Die Canvas -API ist ein wichtiger Inhalt, der in HTML5 verwendet wird, um Grafiken zu zeichnen. Freunde, die es brauchen, können sich auf die folgenden 1. HTML5 -Inhaltstypen beziehen

Hinweis

Die Selektoren -API ist nicht nur bequem. Wenn es darum geht, das DOM zu durchqueren, ist die Selektoren -API normalerweise schneller als die vorherige Child Node -Such -API. Um ein schnelles Stylesheet zu implementieren, optimiert der Browser die Selektoranpassung stark.

Leinwand ist im Wesentlichen eine Bitmap -Leinwand, bei der die darauf gezeichneten Grafiken nicht skalierbar sind und nicht wie ein SVG -Bild vergrößert und reduziert werden können. Darüber hinaus gehören Objekte, die mit Leinwand gezogen wurden, nicht zur Seitendom -Struktur oder einem beliebigen Namespace.

Durch Programmierung mit Leinwand müssen Sie zuerst seinen Kontext erhalten. Führen Sie dann Aktionen im Kontext aus und wenden Sie diese Aktionen schließlich auf den Kontext an.

Die Koordinaten in Leinwand beginnen in der oberen linken Ecke, die x-Achse erstreckt sich nach rechts in horizontaler Richtung (nach Pixeln) und die y-Achse erstreckt sich in vertikaler Richtung nach unten. Der Punkt mit den Koordinaten der oberen linken Ecke x = 0 und y-0 wird als Ursprung bezeichnet.

Wie bei den meisten HTML -Elementen kann das Canvas -Element auch Grenzen hinzufügen, indem CSS angewendet, innere Ränder, Außenränder usw. eingestellt werden, und einige CSS -Attribute können auch von Elementen in Leinwand geerbt werden.

Korrektur - im Zeichensystem ist die Anweisung Transformation - kann nach dem Anbringen nacheinander kombiniert oder modifiziert werden. Die Ergebnisse jedes Zeichnungsvorgangs müssen durch die Korrekturschicht korrigiert werden, bevor sie auf Leinwand angezeigt wird. Obwohl dies zusätzliche Komplexität hinzufügt, fügt es dem Zeichensystem leistungsfähigere Funktionen hinzu, die möglicherweise die Echtzeit-Bildverarbeitung wie die aktuellen Mainstream-Bildbearbeitungswerkzeuge unterstützen, sodass die Komplexität dieses Teils des Inhalts in der API erforderlich ist.

Es gibt einen wichtigen Vorschlag zum wiederverwendbaren Code: Im Allgemeinen sollte die Zeichnung vom Ursprung (0,0 Punkte im Koordinatensystem) beginnen, die Transformation (Skalierung, Übersetzung, Rotation usw.) anwenden und dann den Code kontinuierlich ändern, bis der gewünschte Effekt erreicht ist.

Kontextpfadfunktion

(1) MOVETO (x, y): Verschieben Sie einfach die aktuelle Position in die neue Zielkoordinate (x, y);

(2) 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.

(3) Closepath (): Das Verhalten dieser Funktion ist dem Lineto sehr ähnlich. Der einzige Unterschied besteht darin, dass Closepaht die Startkoordinate des Pfades automatisch als Zielkoordinate verwendet. Closepath informiert auch Leinwand darüber, 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.

(4) Strokerect (): Zeichnen Sie den Umriss des Rechtecks ​​basierend auf der angegebenen Position und den Koordinaten.

(5) ClearRect (): Löschen Sie den gesamten Inhalt im Rechteckbereich und stellen Sie ihn in seinen Ausgangszustand wieder her, dh transparente Farbe.

(6) quadratische Curveto (): Der Ausgangspunkt der Funktionszeichnung einer Kurve ist die aktuelle Koordinate mit zwei Sätzen von (x, y) Kanten. Die zweite Gruppe bezieht sich auf den Endpunkt der Kurve. Die erste Gruppe repräsentiert Kontrollpunkte. Der sogenannte Kontrollpunkt befindet sich neben der Kurve (nicht über der Kurve), und sein Effekt entspricht der Erzeugung einer Spannungskraft auf der Kurve. Durch Anpassen der Position des Kontrollpunkts kann die Kurvatur der Kurve geändert werden.

Bilder erhöhen die Komplexität der Leinwandvorgänge: Sie müssen warten, bis das Bild voll geladen ist, bevor es betrieben werden kann. Browser laden normalerweise Bilder asynchron, während das Seitenskript ausgeführt wird. Wenn die Ansicht das Bild auf die Leinwand vor dem voll geladenen Leinwand bringt, werden in der Leinwand keine Bilder angezeigt.

Der Gradient bezieht sich auf die Verwendung von stufenweise Stichprobenalgorithmen auf Farbsätzen und die Anwendung der Ergebnisse auf Schlaganfallstile und Füllstile.

Die Verwendung von Gradienten erfordert drei Schritte:

(1) ein Gradientenobjekt erstellen;

(2) Farbe für Gradientenobjekte festlegen und die Übergangsmethode angeben.

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

Um festzustellen, welche Farbe angezeigt werden soll, verwenden Sie die Funktion addColorStop im Gradientenobjekt. Diese Funktion ermöglicht die Angabe von zwei Parametern: Farbe und Offset. Farbparameter sind die Farben, die Entwickler verwenden möchten, wenn sie an Offset -Positionen gestreichelt oder gefüllt werden. Der Offset ist ein Wert zwischen 0,0 und 1,0, der darstellt, wie weit der Abstand entlang der Gradientenlinie geändert wird.

Zusätzlich zu linearen Gradienten unterstützt die HTML5 -Canvas -API auch radioaktive Gradienten. Der sogenannte radioaktive Gradient bedeutet, dass sich die Farbe im konischen Bereich zwischen zwei angegebenen Kreisen reibungslos ändert. Die für radioaktiven Gradienten und linearen Gradienten verwendeten Farbabschlusspunkte sind gleich.