HTML5 -Leinwand -Tutorial: Eine Einführung

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!