Gemeinschaft Lernen Tools-Bibliothek Freizeit
suchen
Deutsch
Heim > Web-Frontend > H5-Tutorial > HTML5 Canvas-Einführungslern-Tutorial_HTML5-Tutorial-Fähigkeiten

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

WBOY
Freigeben： 2016-05-16 15:45:41
Original
2082 Leute haben es durchsucht

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

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. >
  3. <html lang="zh" >
  5. <Kopf>
  6.  <meta charset="UTF- 8"> 
  7.  <Titel>Einfache HTML5-Seite Titel>
  8. Kopf>
  10. <Körper> Hallo Airing! Körper>
  12. html>

Die Demo-Laufergebnisse sind wie folgt:
2016317110813836.jpg (850×500)

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.

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. >

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.

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. <html lang="en" >

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

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. <Kopf>... Kopf> 

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:

标签 描述
<head> 定义了文档的信息
<title> 定义了文档的标题
<base> 定义了页面链接标签的默认链接地址
<link> 定义了一个文档和外部资源之间的关系
<meta> 定义了HTML文档中的元数据
<script> 定义了客户端的脚本文件
<style> 定义了HTML文档的样式文件

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. <meta charset="UTF-8"> 

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.

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. <Titel>... Titel> 

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.

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. <Körper>... Körper> 

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.

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. ><html lang ="zh"><Kopf> <meta charset="UTF-8"> ;<Titel>Einfache HTML5-SeiteTitel > Kopf>
  2. <Körper>
  3.  <Leinwand id="Leinwand" >
  4. Ihr Browser unterstützt Canvas nicht? ! Ändere es schnell! !
  5.  Leinwand>Körper> 
  6. html>

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.

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. >  
  2. <html lang="zh" >  
  3. <Kopf>  
  4. <meta charset="UTF- 8">  
  5. <title>基础的Canvas Titel>  
  6. Kopf>  
  7.   
  8. <Körper>  
  9. <div id="canvas- Warp">  
  10.     <canvas id="canvas"  Stil="border: 1px solid #aaaaaa; display: block; margin: 50px auto;" Breite="800" Höhe=" 600">  
  11.     你的浏览器居然不支持Canvas？！赶快换一个吧！！   
  12.     Leinwand>  
  13. div>  
  14. Körper>    
  15. html>  

Laufergebnis:
2016317111155702.jpg (850×500)

Ein paar Anmerkungen zum obigen Code:

1. Das Tag „

“ wurde hinzugefügt und die Option „Persönlich“ ist vorerst nutzlos.
2. Geben Sie die Breiten- und Höhenattribute für das -Tag an, um seine Breite und Höhe festzulegen.
3. Dem -Tag wurde ein Inline-Stil hinzugefügt, um es zu einem Element auf Blockebene zu machen und es in der Mitte anzuzeigen.

Ich werde den Inhalt von CSS hier nicht erklären, schließlich ist es nicht der Protagonist dieses Kurses und es wird viel Platz in Anspruch nehmen, um ihn zu erweitern.

Referenz-Canvas-Element


Document Object Model (DOM)
Document Object Model (DOM) ist eine von der W3C-Organisation empfohlene Standardprogrammierschnittstelle für die Verarbeitung erweiterbarer Auszeichnungssprachen. Die Geschichte des Document Object Model lässt sich bis zum „Browserkrieg“ zwischen Microsoft und Netscape in den späten 1990er Jahren zurückverfolgen. Um in JavaScript und JScript um Leben und Tod zu konkurrieren, statteten beide Parteien Browser in großem Umfang mit leistungsstarken Funktionen aus. Microsoft hat der Webtechnologie viele proprietäre Dinge hinzugefügt, darunter VBScript, ActiveX und Microsofts eigenes DHTML-Format, was dazu führt, dass viele Webseiten auf Plattformen und Browsern, die nicht von Microsoft stammen, nicht richtig angezeigt werden können. DOM ist das damals gebraute Meisterwerk.
Das Document Object Model repräsentiert alle Objekte auf einer HTML-Seite. Es ist sprachneutral und plattformneutral. Dadurch können Inhalt und Stil der Seite nach der Darstellung durch den Webbrowser erneut aktualisiert werden. Benutzer können über JavaScript auf das DOM zugreifen.
Bevor Sie verwenden, müssen Sie zunächst zwei spezifische DOM-Objekte verstehen: Fenster und Dokument.

Das Fensterobjekt ist die höchste Ebene des DOM. Dieses Objekt muss erkannt werden, um sicherzustellen, dass alle Ressourcen und Code geladen wurden, bevor mit der Verwendung der Canvas-Anwendung begonnen wird.
Das Dokumentobjekt enthält alle HTML-Tags auf der HTML-Seite. Dieses Objekt muss abgerufen werden, um Instanzen von zu finden, die mit JavaScript manipuliert werden.

JavaScript-Platzierungsort
Die Verwendung von JavaScript zum Programmieren von Canvas führt zu einem Problem: Wo soll das JavaScript-Programm auf der erstellten Seite gestartet werden?
Fügen Sie JavaScript in den Ein aktueller Trend besteht darin, JavaScript vor dem -Tag am Ende des HTML-Dokuments zu platzieren, um sicherzustellen, dass die gesamte Seite geladen wird, während das JavaScript ausgeführt wird. Da Sie jedoch JavaScript verwenden müssen, um zu testen, ob die Seite geladen wird, bevor Sie das -Programm ausführen, ist es am besten, das JavaScript im <head> zu platzieren.
Allerdings gehe ich nicht den üblichen Weg (lacht), daher füge ich in späteren Fällen den JavaScript-Code immer noch entsprechend meinem eigenen Codierungsstil am Ende des ein. Wenn viel JavaScript-Code vorhanden ist, empfiehlt es sich natürlich, externe .js-Dateien zu laden. Der Code lautet ungefähr wie folgt:

JavaScript-CodeInhalt in die Zwischenablage kopieren

In der tatsächlichen Projektentwicklung sind HTML, CSS und JS vollständig getrennt. Der für Falldemonstrationen verwendete Code ist jedoch etwas geringer, sodass die meisten von ihnen nicht die Methode zum Laden externer .js-Dateien verwenden.


Das Canvas-Objekt abrufen
Das Canvas-Objekt abrufen ist eigentlich nur ein Satz.

JavaScript-CodeInhalt in die Zwischenablage kopieren
  1. var canvas = document.getElementById("canvas");

Var wird zur Variablendefinition verwendet. Da JS eine schwach typisierte Sprache ist, wird var zum Definieren jeder Variablen verwendet. Die Canvas-Variable ist eine Variable. Verwenden Sie die Methode getElementById() des Dokumentobjekts, um das Objekt anhand der ID abzurufen. Zuvor haben wir dem Tag eine ID mit dem Namen „canvas“ gegeben, daher bezieht sich der letzte Canvas in diesem Satz auf die ID von (Ist es etwas verwirrend? Sie müssen es ein paar Mal lesen, um es herauszufinden.)
Einen Pinsel besorgen (2D-Umgebung)
Was brauchen Sie zuerst zum Zeichnen? Pinsel. Das Erhalten des Canvas-Pinsels ist ebenfalls eine Sache eines Satzes, nämlich das gerade erhaltene Canvas-Objekt direkt zu verwenden und seine Methode getContext ("2d") aufzurufen.

JavaScript-CodeInhalt in die Zwischenablage kopieren
  1. var context = canvas.getContext("2d");

Der Kontext hier ist der Pinsel.
In anderen Tutorials wird der Begriff „2D-Umgebung“ verwendet. Ich denke, Pinsel sind anschaulicher. Die Inspiration stammt vom g-Pinsel der Graphics-Klasse in Java, und das Prinzip ist dasselbe.


Zusammenfassung
Es gibt nur drei Schritte zur Vorbereitung:

1. Gestalten Sie die Leinwand: Fügen Sie das Canvas-Element hinzu, indem Sie das Tag hinzufügen. 2. Holen Sie sich die Leinwand: Rufen Sie das Canvas-Objekt über die ID des Tags ab. Holen Sie sich den Pinsel: Erhalten Sie die 2D-Umgebung über die Methode getContext("2d") des Canvas-Objekts
Der entsprechende Code für
besteht aus drei Sätzen:

JavaScript-Code
Inhalt in die Zwischenablage kopieren
  2. var canvas = document.getElementById("canvas");
    3. var
  3. context = canvas.getContext("2d"
    4. Der vollständige Code lautet wie folgt.


JavaScript-Code

Inhalt in die Zwischenablage kopieren
  2. "zh">
    3. <head>
    4. "UTF-8"> <title>Basic Canvas
    7. "canvas-warp">
  7. "canvas" style=
    8. "border: 1px solid #aaaaaa; display: block; margin: 50px auto ;"
  8. width="800" height="600"> Ihr Browser unterstützt Canvas nicht? ! Ändere es schnell! !
    11. <script>
    12. window.onload =
  12. Funktion
    13. (){
  14. var canvas = document.getElementById("canvas"
    15. );
  15. var context = canvas.getContext("2d"
  16. }
  22. Ein paar Punkte, die Sie beachten sollten: 1.JavaScript-Code muss in <script>-Tags eingeschlossen werden.
2.window.onload = function(){} wird unmittelbar nach dem Laden der Seite ausgeführt, was bedeutet, dass der Inhalt des Funktionskörpers nach dem Laden und Ausführen der Seite angezeigt wird.
Zu diesem Zeitpunkt sind die Leinwand und der Pinsel vorbereitet. Als nächstes verwenden wir den Pinsel (Kontextobjekt), um hochauflösende Bilder zu zeichnen! Aufwachen! Die Seele eines Künstlers!

2016317111405657.png (1433×771)

Verwandte Etiketten：
canvas html5
Quelle：php.cn
Vorheriger Artikel：Grundlegendes HTML5-Canvas-Strichzeichnungsbeispiel, Tutorial_HTML5-Tutorial-Fähigkeiten Nächster Artikel：HTML5 Canvas implementiert Feuerwerks-Spezialeffekte. HTML5-Tutorial-Fähigkeiten
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Aktuelle Ausgaben
Wie kann ich dafür sorgen, dass mein Bild auf der Hauptanzeige der Seite erscheint? Ich möchte einige Fotos über NASAAPI erhalten. Diese Fotos werden dann im Miniaturbild und...
Aus 2024-04-06 15:33:12
0
1
433
Können PDF-Dateien mit HTML5 und Javascript ausgeführt werden? Ich habe die dumme Idee, ein Programm zu erstellen, das auf keinem Computer blockiert wird...
Aus 2024-04-05 12:57:00
0
1
456
Was ist der Unterschied zwischen enctype und formenctype in HTML5? Ich frage mich nur, was der Unterschied zwischen den Attributen enctype und formenctype in...
Aus 2024-04-02 11:47:56
0
1
275
Die Seite mobilfreundlich gestalten? Ich habe viele Webseiten und einige Websites. Die Sache ist, ich bin ein Anfänger. Ich ver...
Aus 2024-04-01 20:42:38
0
1
259
verwandte Themen
Mehr>
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage