Tutorial zur Verwendung von Canvas in HTML5 zum Zeichnen eines lächelnden Gesichts_HTML5-Tutorial-Tipps

Heute erfahren Sie etwas über eine Webtechnologie namens Canvas und ihre Verbindung mit dem Document Object Model (allgemein bekannt als DOM). Diese Technologie ist sehr leistungsfähig, da sie es Webentwicklern ermöglicht, mithilfe von JavaScript auf HTML-Elemente zuzugreifen und diese zu ändern.

Jetzt fragen Sie sich vielleicht, warum wir mit JavaScript groß rauskommen müssen. Kurz gesagt, HTML und JavaScript sind voneinander abhängig und einige HTML-Komponenten, wie zum Beispiel das Canvas-Element, können nicht unabhängig von JavaScript verwendet werden. Denn was nützt eine Leinwand, wenn wir nicht darauf zeichnen können?

Um dieses Konzept besser zu verstehen, versuchen wir, anhand eines Beispielprojekts ein einfaches Smiley-Gesicht zu zeichnen. Fangen wir an.
Starten

Erstellen Sie zunächst ein neues Verzeichnis zum Speichern Ihrer Projektdateien und öffnen Sie dann Ihren bevorzugten Texteditor oder Ihr bevorzugtes Webentwicklungstool. Sobald Sie dies getan haben, sollten Sie eine leere index.html und eine leere script.js erstellen, die wir später weiter bearbeiten werden.

Als nächstes ändern wir die Datei index.html, was nicht viel erfordert, da der größte Teil des Codes für unser Projekt in JavaScript geschrieben wird. Was wir in HTML tun müssen, ist ein Canvas-Element zu erstellen und auf script.js zu verweisen, was ziemlich einfach ist:

XML/HTML-CodeInhalt in die Zwischenablage kopieren

1. ><Körper>
3.  <canvas id='canvas' Breite='640' Höhe='480'>Leinwand>
4.  <script type='text/ javascript' src='script.js'>Skript>
6. body>html>

Zur Erläuterung verwende ich eine Reihe von Tags < html >, damit wir dem Dokument weitere Elemente hinzufügen können. Ich nutzte diese Gelegenheit und vervollständigte ein 640*480 großes Canvas-Element mit dem ID-Attribut „canvas“.

Dieses Attribut fügt dem Element einfach eine Zeichenfolge zur eindeutigen Identifizierung hinzu. Wir werden dieses Attribut später verwenden, um unser Canvas-Element in der JavaScript-Datei zu finden. Als Nächstes verweisen wir auf die JavaScript-Datei mithilfe des

• Das Vollbild-Bildlauf-Plug-in AlloyTouch erstellt in 30 Sekunden eine flüssige H5-Seite
• Tatsächlicher HTML5-Kampf und Analyse von Touch-Ereignissen (Touchstart, Touchmove und Touchend)
• Ausführliche Erläuterung der Beispiele für Bildzeichnungen in HTML5 Canvas 9
• Reguläre Ausdrücke und neue HTML5-Elemente
• So kombinieren Sie NodeJS und HTML5, um mehrere Dateien per Drag-and-Drop auf den Server hochzuladen