Key Takeaways

• html5 canvas ist eine leistungsstarke Technologie, mit der Entwickler Grafiken zeichnen und Animationen direkt in einem Browser mit JavaScript erstellen k?nnen. Das Canvas -Element wird im HTML -Code unter Verwendung von Breiten- und H?henattributen definiert, und seine tats?chliche Kraft wird durch die HTML5 -Canvas -API genutzt.
• Die HTML5 -Canvas -Feature ist interaktiv, animiert, flexibel und von allen wichtigen Browsern unterstützt. Es kann für eine Reihe von Anwendungen verwendet werden, darunter Spiele, Werbung, Datenrepr?sentation, Bildung und Schulung sowie Kunst und Dekoration.
• Um HTML5 -Canvas zu verwenden, ben?tigt ein Entwickler einen Code -Editor und einen Browser mit HTML5 -Canvas -Unterstützung. Ein Canvas -Element wird in HTML erstellt, und JavaScript wird verwendet, um über einen vollst?ndigen Satz von Zeichenfunktionen auf den Canvas -Bereich zuzugreifen, um die Erzeugung dynamischer Grafiken zu erm?glichen.
• HTML5-Leinwand verfügt über ein einzigartiges Koordinatensystem, in dem der Ursprung an der oberen linken Ecke der Leinwand platziert wird. X -Koordinaten nehmen nach rechts zu und die Y -Koordinaten nehmen nach unten auf der Leinwand zu. Dieses System hat keine sichtbaren negativen Punkte, sodass Objekte, die mit negativen Koordinatenpunkten positioniert sind

Interessiert an CSS -Animation? Erstellen Sie Animationen mit CSS, einem vollst?ndigen Kurs zu CSS -überg?ngen und Keyframes -Animation des fachkundigen Webentwicklers Donovan Hutchinson, der für SitePoint -Mitglieder verfügbar ist. Für ein Beispiel von HTML5 -Leinwandanimationen sehen Sie sich die Illustrationen mit den folgenden HTML5 -Leinwand an. Laden des Spielers…

Eines der wichtigsten Instrumente im Toolkit eines Malers ist die Leinwand. Es gibt ihnen die Freiheit, alle m?glichen Gefühle, Eindrücke, Ideen usw. in fast unbegrenzten Variationen und Kombinationen auszudrücken. Und diese Freiheit kann nur durch zwei Dinge eingeschr?nkt werden - ihre F?higkeiten und ihre Vorstellungskraft.

Die Situation in der Webentwicklungswelt ist ?hnlich. Mit dem anhaltenden Fortschritt von HTML5 und ihren leistungsstarken Spezifikationen haben Webentwickler die F?higkeit erlangt, Dinge zu tun, die in der Vergangenheit unm?glich waren. Das Zeichnen von Grafiken und das direkte Erstellen von Animationen im Browser ist jetzt dank einer Technologie, die als HTML5 -Leinwand bezeichnet wird, durchaus m?glich.

Was ist HTML5 -Leinwand?

Das Canvas -Element ist ein Element, das im HTML -Code unter Verwendung von Breiten- und H?henattributen definiert ist. Die wahre Kraft des Canvas -Elements wird jedoch erreicht, indem die HTML5 -Canvas -API ausnutzt. Diese API wird verwendet, indem JavaScript geschrieben wird, die über einen vollst?ndigen Satz Zeichnungsfunktionen auf den Canvas -Bereich zugreifen k?nnen, wodurch dynamisch generierte Grafiken erm?glicht werden k?nnen.

Was ist so toll an HTML5 -Leinwand?

Hier sind einige Gründe, warum Sie in Betracht ziehen m?chten, das Lernen der Canvas -Funktion von HTML5 zu verwenden:

• Interaktivit?t. Leinwand ist vollst?ndig interaktiv. Es kann auf die Aktionen eines Benutzers reagieren, indem es nach Tastatur-, Maus- oder Berührungsereignissen zuh?rt. Ein Entwickler ist also nicht nur auf statische Grafiken und Bilder beschr?nkt.
• Animation. Jedes auf der Leinwand gezogene Objekt kann animiert werden. Auf diese Weise k?nnen alle Ebenen von Animationen erstellt werden, von einfachen Sprungb?llen bis hin zu komplexen Vorw?rts- und inversen Kinematik.
• Flexibilit?t. Entwickler k?nnen mit Leinwand fast alles erstellen. Es kann Zeilen, Formen, Text, Bilder usw. angezeigt - mit oder ohne Animation. Au?erdem ist es m?glich, Video und/oder Audio zu einer Canvas -Anwendung hinzuzufügen.
• Browser/Plattformunterstützung. HTML5 -Leinwand wird von allen gro?en Browsern unterstützt und kann auf einer Vielzahl von Ger?ten wie Desktops, Tablets und Smartphones zugegriffen werden.
• Popularit?t. Die Popularit?t der Leinwand ist schnell und stetig w?chst, so dass es keinen Mangel an Ressourcen gibt.
• Es ist ein Webstandard. Im Gegensatz zu Flash und Silverlight ist Canvas eine offene Technologie, die Teil von HTML5 ist. Und obwohl nicht alle Funktionen in allen Browsern implementiert sind, k?nnen Entwickler sicher sein, dass Leinwand auf unbestimmte Zeit in der N?he sein werden.
• einmal entwickeln, überall rennen. HTML5 Canvas bietet eine gro?e Portabilit?t. Einmal erstellt, kann eine Canvas -Anwendung im Gegensatz zu Flash und Silverlight fast überall laufen - von den gr??ten Computern bis zu den kleinsten mobilen Ger?ten.
• kostenlose und zug?ngliche Entwicklungstools. Die grundlegenden Tools zum Erstellen von HTML5 -Canvas -Anwendungen sind nur ein Browser und ein guter Code -Editor. Au?erdem gibt es viele gro?artige und kostenlose Bibliotheken und Tools, die Entwicklern mit fortschrittlicher Leinwandentwicklung helfen.

Welche Anwendungen k?nnen Sie mit HTML5 -Leinwand erstellen?

ok, Canvas ist gro?artig. Aber was genau kann es verwenden? Mal sehen.

• Gaming. Das Feature -Set von HTML5 Canvas ist ein idealer Kandidat für die Herstellung aller Arten von 2D- und 3D -Spielen.
• Werbung. HTML5-Leinwand ist ein gro?artiger Ersatz für Banner und Anzeigen auf Flash-basierte. Es enth?lt alle erforderlichen Funktionen, um die Aufmerksamkeit der K?ufer auf sich zu ziehen.
• Datendarstellung. HTML5 kann Daten aus globalen Datenquellen sammeln und sie verwenden, um visuell ansprechende und interaktive Diagramme und Diagramme mit dem Canvas -Element zu generieren.
• Ausbildung und Ausbildung. HTML5 -Leinwand kann verwendet werden, um effektive und attraktive Lernerfahrungen zu produzieren und Text, Bilder, Videos und Audio zu kombinieren.
• Kunst und Dekoration. Mit ein wenig Fantasie und der gro?en Vielfalt von Farben, Gradienten, Mustern, Transparenz, Schatten und Clipping -Funktionen von Canvas k?nnen alle Arten von künstlerischen und dekorativen Grafiken gezeichnet werden.

Jetzt, da wir wissen, warum wir Leinwand lernen sollten, schauen wir uns die Grundlagen von HTML5 -Leinwand an und wie man sie verwendet.

Canvas -Rendering -Kontexte

Jedes HTML5 -Canvas -Element muss einen -Kontext haben. Der Kontext definiert, welche HTML5 -Canvas -API Sie verwenden werden. Der 2D -Kontext wird zum Zeichnen von 2D -Grafiken und zum Manipulieren von Bitmap -Bildern verwendet. Der 3D -Kontext wird für die Erstellung und Manipulation von 3D -Grafiken verwendet. Letzteres wird tats?chlich WebGL bezeichnet und basiert auf OpenGl ES.

Erste Schritte

Um mit Leinwand zu beginnen, ben?tigen Sie lediglich ein Code -Editor und ein Browser mit HTML5 -Canvas -Unterstützung. Ich benutze sublime Text und Google Chrome, aber Sie k?nnen alles verwenden, was Sie wollen.

Unser HTML zu beginnen wird so aussehen:

<span><span><span><canvas</span> id<span>="exampleCanvas"</span> width<span>="500"</span> height<span>="300"</span>></span>
</span>
  <span><!-- OPTION 1: leave a message here if browser doesn't support canvas -->
</span>    <span><span><span><p</span>></span>Your browser doesn’t currently support HTML5 Canvas. 
</span>    Please check caniuse.com/#feat=canvas for information on 
    browser support for canvas.<span><span><span></p</span>></span>
</span>
  <span><!-- OPTION 2: put fallback content (text, image, Flash, etc.) 
</span><span>                 if the browser doesn't support canvas -->
</span>
<span><span><span></canvas</span>></span></span>

Und hier ist unser JavaScript, das wir am Ende unserer HTML -Seite aufnehmen k?nnen:

<span>var canvas = document.getElementById('exampleCanvas'),
</span>    context <span>= canvas.getContext('2d');
</span>
    <span>// code examples will continue here...</span>

standardm??ig erstellt der Browser Leinwandelemente mit einer Breite von 300 Pixel und einer H?he von 150 Pixel, auch wenn diese nicht im HTML angegeben sind. Sie k?nnen die Gr??e ?ndern, indem Sie die Breite und H?he angeben, wie ich es im HTML getan habe.

Beachten Sie auch, dass wir der Leinwand ein ID -Attribut gegeben haben, das wir in unserem JavaScript verwenden werden. Und schlie?lich k?nnen Sie, wenn Sie m?chten, CSS verwenden, um einen Rand hinzuzufügen, um die Leinwand mit einem dünnen Rahmen sichtbar zu machen. Dies ist nicht erforderlich, es wird als visuelle Hilfe für uns verwendet, um die Grenze des Canvas -Elements zu sehen.

Beachten Sie, dass ich zwischen dem ?ffnen und Schlie?en -Tags Inhalte hinzugefügt habe, die angezeigt werden, wenn der Browser Canvas nicht unterstützt. Dies kann nahezu jeder Arten von Inhalten sein, den ein ?lterer Browser unterstützt.

Das JavaScript beginnt mit zwei Zeilen. In der ersten Zeile erstellen wir eine Variable, die unser Canvas -Element über seine ID zwischengeschnitten hat. Die zweite Zeile erstellt eine Variable (Kontext), die den 2D -Kontext für die Leinwand unter Verwendung der Funktion getContext () verweist. Wir werden die Kontextvariable verwenden, um auf alle Leinwandzeichnungsfunktionen und Eigenschaften zuzugreifen.

Mit unseren Leinwand k?nnen wir mit der Leinwand -API experimentieren. Lassen Sie uns vorher jedoch einige weitere Aspekte der Leinwandfunktion klarstellen.

html5 canvas -Elementgr??e im Vergleich zur Zeichnung Oberfl?chengr??e

Neben der Breite und der H?henattribute des Canvas -Elements k?nnen Sie auch CSS verwenden, um die Gr??e eines Canvas -Elements festzulegen. Die Gr??e eines Canvas -Elements mit CSS ist jedoch nicht dasselbe wie das Einstellen der Breiten- und H?henattribute des Elements. Dies liegt daran, dass eine Leinwand tats?chlich zwei Gr??en hat: die Gr??e des Elements selbst und die Gr??e der Zeichenfl?che des Elements.

Wenn Sie die Breiten- und H?henattribute des Elements festlegen, setzen Sie sowohl die Gr??e des Elements als auch die Gr??e der Zeichnungsfl?che des Elements. Wenn Sie jedoch CSS verwenden, um ein Canvas -Element zugr??en, setzen Sie nur die Gr??e des Elements und nicht die Zeichenfl?che. Wenn die Gr??e des Canvas -Elements nicht mit der Gr??e seiner Zeichnungsfl?che übereinstimmt, skaliert der Browser die Zeichnungsoberfl?che, um das Element anzupassen.

Aus diesem Grund ist es eine gute Idee, die Breite und die H?henattribute des Canvas -Elements zu verwenden, um das Element zu schie?en, anstatt CSS zu verwenden.

Verst?ndnis des Canvas -Koordinatensystems

In einem 2D -Bereich werden Positionen mit X- und Y -Koordinaten verwiesen. Die x -Achse erstreckt sich horizontal und die y -Achse erstreckt sich vertikal. Das Zentrum hat eine Position x = 0 und y = 0, die auch als (0, 0) ausgedrückt werden kann. Diese Methode zur Positionierung von Objekten, die in der Mathematik verwendet werden, ist als kartesisches Koordinatensystem bekannt.

Das Canvas-Koordinatensystem legt den Ursprung jedoch in die obere linke Ecke der Leinwand, wobei X-Koordinaten nach rechts zunehmen und Y-Koordinaten nach unten der Leinwand zunehmen. Im Gegensatz zu einem Standard -kartesischen Koordinatenraum hat der Leinwandraum keine sichtbaren negativen Punkte. Die Verwendung negativer Koordinaten führt nicht dazu, dass Ihre Anwendung fehlschl?gt. Objekte, die mit negativen Koordinatenpunkten positioniert sind, werden auf der Seite nicht angezeigt.

Basic Canvas Beispiele

Wie bereits erw?hnt, k?nnen Sie viele Arten von Objekten erstellen, darunter Linien, Kurven, Pfade, Formen, Text usw. In den folgenden Beispielen k?nnen Sie sehen, wie einige dieser Objekte tats?chlich gezeichnet werden. Ich werde nicht ausführlich auf die Canvas -API eingehen. Dies sind nur leicht zu helfen, ein Gefühl dafür zu bekommen, wie Leinwand funktioniert.

Zeichnungszeilen

Um eine Linie zu zeichnen, verwenden wir vier Canvas -API -Methoden. Wir beginnen mit der Methode mit BeginnPath (), die den Browser anweist, sich darauf vorzubereiten, einen neuen Weg zu ziehen. Als n?chstes verwenden wir die Moveto (X, Y) -Methode, um den Startpunkt der Linie festzulegen. Dann legt die Lineto (x, y) -Methode den Endpunkt fest und zeichnet die Linie, indem die beiden Punkte angeschlossen werden.

Zu diesem Zeitpunkt wird die Linie gezogen, aber sie ist immer noch unsichtbar. Um es sichtbar zu machen, verwenden wir die Stroke () -Methode, um die Linie mit der standardm??igen schwarzen Farbe anzuzeigen.

<span><span><span><canvas</span> id<span>="exampleCanvas"</span> width<span>="500"</span> height<span>="300"</span>></span>
</span>
  <span><!-- OPTION 1: leave a message here if browser doesn't support canvas -->
</span>    <span><span><span><p</span>></span>Your browser doesn’t currently support HTML5 Canvas. 
</span>    Please check caniuse.com/#feat=canvas for information on 
    browser support for canvas.<span><span><span></p</span>></span>
</span>
  <span><!-- OPTION 2: put fallback content (text, image, Flash, etc.) 
</span><span>                 if the browser doesn't support canvas -->
</span>
<span><span><span></canvas</span>></span></span>

siehe das Beispiel für Stift -Canvas -Zeile von SitePoint (@sitepoint) auf CodePen.

Rechteck zeichnen

Um ein Rechteck zu zeichnen, k?nnen wir die Methode Fillrect (x, y, Breite, H?he) verwenden, um die Koordinaten und die Abmessungen zusammen mit der Fillstyle -Eigenschaft einzustellen, um die Füllfarbe einzustellen.

<span>var canvas = document.getElementById('exampleCanvas'),
</span>    context <span>= canvas.getContext('2d');
</span>
    <span>// code examples will continue here...</span>

siehe Beispielrechteck -Beispiel für Stift -Leinwand von SitePoint (@sinepoint) auf CodePen.

Beachten Sie, dass das Rechteck in der N?he der oberen linken Ecke positioniert ist.

Text zeichnen

Um Text auf der Leinwand zu zeichnen, k?nnen wir zusammen mit der Schriftart FULTEXT (String, X, Y) die Schriftart, Gr??e und Stil des Textes (?hnlich wie bei der Schriftart in CSS) einstellen.

).

context<span>.beginPath();
</span>context<span>.moveTo(50, 50);
</span>context<span>.lineTo(250, 150);
</span>context<span>.stroke();</span>

Siehe das Beispiel für Stift -Leinwand -Text von SitePoint (@sitepoint) auf CodePen.

Sie sollten sich bewusst sein, dass zwar einfaches Zeichnen mit der HTML5 -Canvas -API einfach ist, komplexe Formen und Animationen zu erstellen, einige Mathematik- und Physikwissen erforderlich sind. Eines der besten Bücher zu diesem Thema ist die Foundation HTML5 -Animation mit JavaScript. Dieses Buch ist eine gro?artige Ressource für das Lernen, Dinge zu verschieben, von einfachen bis komplexen Animationen.

Wo lernen Sie mehr?

Wenn Sie hier lernen m?chten, sind einige Ressourcen:

• Canvas -Tutorial - Ein ausgezeichnetes Tutorial zu MDN, voller Beispiele, Abbildungen und detaillierten Erkl?rungen.
• HTML5 Canvas Element Guide - Ein Anf?nger -Tutorial aus sechs überarbeitungen.
• HTML5 -Leinwand -Tutorials - Ein vollst?ndiger Satz von Tutorials, die von Eric Rowell, dem Sch?pfer der KineticJS Canvas Library, erstellt wurden. Alle Beispiele sind interaktiv; Sie k?nnen mit ihnen spielen und das Ergebnis sofort sehen.

Beschleunigen Sie die Leinwandentwicklung

Die Arbeit mit der ?rohen“ HTML5 -Canvas -API kann ein langwieriger Job sein. Aus diesem Grund ist es eine gute Idee, wenn Sie es gut lernen, zu einer guten Leinwandbibliothek zu wechseln, die beschleunigen und Ihre Canvas -Entwicklung erheblich erleichtert.

Hier sind einige beliebte Entscheidungen:

• Kineticjs
• paper.js
• Easeljs
• fabric.js
• ocanvas

Eine andere M?glichkeit, Ihre HTML5-Canvas-Entwicklung zu beschleunigen, besteht darin, das Ai->-Canvas-Plugin für Adobe Illustrator zu verwenden. In diesem Artikel finden Sie einen überblick über das Plugin auf SitePoint.

Schlussfolgerung

Das ist es. Ich hoffe

h?ufig gestellte Fragen (FAQs) zu HTML5 Canvas

Was ist der Unterschied zwischen SVG- und HTML5 -Leinwand? Sie unterscheiden sich jedoch in ihren Ansatz- und Anwendungsf?llen. SVG ist ein vektorbasierter Ansatz, bei dem jede gezogene Form als Objekt in Erinnerung bleiben. Wenn die Attribute eines Objekts ge?ndert werden, kann der Browser die Szene automatisch neu erstellen. SVG eignet sich hervorragend für interaktive Grafiken und Animationen von Elementen. Andererseits basiert die HTML5-Leinwand auf Pixel. Sobald eine Form gezogen ist, wird sie vom System vergessen. Wenn sich seine Attribute ?ndern, muss es zusammen mit der gesamten Szene neu gezeichnet werden. Dies macht Canvas ideal für grafisch intensive Spiele oder Anwendungen wie Fotobearbeitungssoftware.

Wie kann ich einer Leinwand Text hinzufügen? Sie k?nnen die Füller -Methode (Text, x, y) verwenden, wobei Text die Zeichenfolge ist, die Sie schreiben m?chten, und X und Y sind die Koordinaten, in denen der Text startet. Sie k?nnen auch die Schriftart, Gr??e und Farbe des Textes mit der Schriftart und der Fillstyle -Eigenschaften anpassen.

Kann ich HTML5 -Leinwand für die Spielentwicklung verwenden? Die pixelbasierte Natur macht es geeignet, komplexe und grafisch intensive Spiele zu erstellen, die im Browser reibungslos verlaufen. Für 3D -Spiele w?re WebGL, das auch die Canvas -API verwendet, aufgrund seiner Hardware -Beschleunigungsfunktionen eine bessere Wahl. Bietet verschiedene Methoden zum Zeichnen von Formen. Um ein Rechteck zu zeichnen, k?nnen Sie die Methode Fillrect (x, Y, Breite, H?he) verwenden. Um einen Kreis zu zeichnen, k?nnen Sie die Methode ARC (X, Y, Radius, Startangle, Endangle) verwenden. Sie k?nnen auch komplexe Formen mit Pfaden zeichnen.

Wie kann ich Objekte mit HTML5 -Leinwand animieren? zweite. Jede Neuausziehung wird als Rahmen bezeichnet, und ?nderungen der Eigenschaften der Objekte werden zwischen den Rahmen vorgenommen, um die Illusion der Bewegung zu erzeugen. Dies erfolgt typischerweise mit der RequestArimationFrame () -Methode. Dies bedeutet, dass Sie ihnen keine Ereignishandler direkt anbringen k?nnen. Sie k?nnen jedoch die Interaktivit?t erreichen, indem Sie die Eigenschaften der Objekte in JavaScript verfolgen und die Leinwand beim Auftreten einer Interaktion neu zeichnen. Speichern Sie den Inhalt einer Leinwand als Bild mit der Methode toDataurl (). Diese Methode gibt eine Daten -URL zurück, die eine Darstellung des Bildes im Format enth?lt, das durch den Typ -Typ -Parameter angegeben ist Leinwand mit der Methode ClearRect (X, Y, Breite, H?he). Um die gesamte Leinwand zu l?schen, k?nnen Sie x und y auf 0 und die Breite und H?he auf Breite und H?he der Leinwand einstellen. Leinwand wird in allen modernen Browsern unterstützt, einschlie?lich Chrome, Firefox, Safari, Opera und Edge. Es wird jedoch nicht im Internet Explorer 8 oder früher unterstützt. Da es sich bei Canvas jedoch um eine API auf niedriger Ebene handelt, enth?lt sie keine detaillierten Fehlermeldungen. Daher kann das Debuggen herausfordernd sein und beinhaltet oft viel Versuch und Irrtum.

Das obige ist der detaillierte Inhalt vonHTML5 -Leinwand -Tutorial: Eine Einführung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!