HTML5 Canvas-Einführungslern-Tutorial_HTML5-Tutorial-Fähigkeiten

HTML5

Was genau ist HTML5? In den HTML5-FAQ des W3C heißt es zu HTML5: HTML5 ist eine kostenlose Lizenz, die auf einer offenen Plattform entwickelt wurde.
Im Einzelnen gibt es zwei Interpretationen dieses Satzes:
„
bezieht sich auf eine Gruppe von Technologien, die zusammen die zukünftige offene Netzwerkplattform bilden. Zu diesen Technologien gehören HTML5-Spezifikationen, CSS3, SVG, MATHML, Geolocation, XmlHttpRequest , Context 2D, Web Fonts und andere Technologien sind informell und ändern sich im Laufe der Zeit.
Bezieht sich auf die HTML5-Spezifikation und ist sicherlich Teil der Open Web Platform.

Browserunterstützung für Canvas
Nachfolgend habe ich die beliebtesten Webbrowser und die Mindestversionsnummern aufgelistet, ab denen sie das Canvas-Element unterstützen.

Ich empfehle hier die Verwendung von Chrome.

Einfache HTML5-Seite

Die Demo-Laufergebnisse sind wie folgt:

HTML besteht aus Tag-Elementen in Form von spitzen Klammern <>. Diese Tags erscheinen normalerweise paarweise und Tags können nur verschachtelt und nicht gekreuzt werden.
Erweiterung:
Was paarweise erscheint, wird als geschlossenes Tag bezeichnet, und was einzeln erscheint, wird als einzelnes Tag bezeichnet. Es ist auf jeden Fall geschlossen (ein einzelnes Tag muss nicht geschlossen werden, aber in XHTML ist das Schließen unbedingt erforderlich). Schluss-Tags werden in Start-Tags und End-Tags unterteilt. Beispielsweise ist ein Start-Tag und Selbstbezeichnungen wie
usw.
Für weitere Tags wird empfohlen, dass Sie sich selbst darüber informieren. Für das Selbststudium empfehlen wir die W3school-Plattform.
Hier konzentrieren wir uns auf die Tags, die im obigen Code erscheinen.

Dieses Tag gibt an, dass der Webbrowser die Seite im Standardmodus rendert. Dies ist für HTML5-Dokumente gemäß der vom W3C definierten HTML5-Spezifikation erforderlich. Dieses Tag vereinfacht die seit langem bestehenden seltsamen Unterschiede in der Art und Weise, wie verschiedene Browser HTML-Seiten darstellen. Normalerweise ist es die erste Zeile im Dokument.

Dies ist das -Tag, das die Sprachbeschreibung enthält, zum Beispiel „en“ für Englisch und „zh“ für Chinesisch.

Diese beiden Markierungen kennzeichnen den Anfang bzw. das Ende der Header-Informationen. Die im Header enthaltenen Tags sind Titel, Vorwort, Beschreibung und andere Inhalte der Seite. Sie werden nicht als Inhalt selbst angezeigt, beeinflussen aber den Anzeigeeffekt der Webseite. Die am häufigsten verwendeten Tags in Headern sind das <title>-Tag und das <meta>-Tag.

Die folgende Tabelle listet alle Tags und Funktionen unter dem HTML-Kopfelement auf:

Dieses Tag beschreibt den vom Webbrowser verwendeten Zeichenkodierungsmodus, der hier normalerweise auf UTF-8 eingestellt ist. Eine Änderung ist nicht erforderlich, wenn keine besonderen Einstellungen erforderlich sind. Dies ist auch ein erforderliches Element für HTML5-Seiten.

Dieses Tag beschreibt den Titel des im Browserfenster angezeigten HTML. Dies ist ein wichtiges Tag und eine der wichtigsten Informationen, die Suchmaschinen zum Indexieren von Inhalten auf einer HTML-Seite verwenden.

Der eigentliche Inhalt, der auf der Webseite angezeigt wird, ist zwischen diesen beiden enthalten.
Zusammenfassend lässt sich sagen, dass die HTML5-Webseite aus den Teilen in der ersten Zeile besteht und ;head>-Tag-Teil und der durch angegebene Körper.
Auf diese Weise haben wir die Grundstruktur der einfachsten HTML-Webseite herausgefunden.

Einen Canvas hinzufügen
Das Hinzufügen eines Canvas in HTML ist sehr einfach, fügen Sie einfach das -Tag in den -Teil ein! Sie können sich auf den folgenden Code beziehen.

Da die Ergebnisseite eine komplett leere Seite ist, werde ich hier kein Bild posten. Sie fragen sich vielleicht, warum es leer ist? (Unsinn, ich hatte noch keine Zeit zum Zeichnen!) Die ursprüngliche Bedeutung von Canvas ist Leinwand, was Leinwand bedeutet (Unsinn ... Die Leinwand ist in HTML5 transparent und unsichtbar).
Was bedeutet der Text im -Tag? Das heißt, sobald der Browser Canvas beim Ausführen der HTML-Seite nicht unterstützt, wird dieser Text angezeigt. Mit anderen Worten: Solange Ihr Browser Canvas unterstützt, wird dieser Text nicht auf der Seite angezeigt.
Was bedeutet die ID in Die ID ist eines der Attribute des Tags. Sie wird im JavaScript-Code verwendet, um den Namen einer bestimmten anzugeben. Sie ist genau wie die ID-Nummer einer Person eindeutig.
Um die Leinwand klarer darzustellen und spätere Demonstrationen zu erleichtern, habe ich den Code leicht geändert und alle nachfolgenden Zeichnungen werden auf dieser Leinwand gezeichnet.

Laufergebnis:

Ein paar Anmerkungen zum obigen Code:

1. Das Tag „