Gemeinschaft
Lernen
Tools-Bibliothek
KI-Tools
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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
May 16, 2016 pm 03:45 PM
canvas html5

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)

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

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

Video Face Swap

Video Face Swap

Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Mehr anzeigen

Heißer Artikel

Assassin's Creed Shadows: Seashell Riddle -Lösung
3 Wochen vor By DDD
Was ist neu in Windows 11 KB5054979 und wie Sie Update -Probleme beheben
2 Wochen vor By DDD
Wo kann man die Kransteuerungsschlüsselkarten in Atomfall finden
3 Wochen vor By DDD
Assassins Creed Shadows - So finden Sie den Schmied und entsperren Sie die Waffen- und Rüstungsanpassung
1 Monate vor By DDD
<🎜>: Dead Rails - wie man jede Herausforderung abschließt
3 Wochen vor By DDD
Mehr anzeigen

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Mehr anzeigen

Heiße Themen

Wo ist der Login-Zugang für Gmail-E-Mail?
7629
15
CakePHP-Tutorial
1389
52
Wie lautet das Format des Kontonamens von Steam?
89
11
Win11 -Aktivierungsschlüssel dauerhaft
70
19
NYT -Verbindungen Hinweise und Antworten
31
141
Mehr anzeigen
Related knowledge
Tabellenrahmen in HTML Tabellenrahmen in HTML Sep 04, 2024 pm 04:49 PM

Anleitung zum Tabellenrahmen in HTML. Hier besprechen wir verschiedene Möglichkeiten zum Definieren von Tabellenrändern anhand von Beispielen für den Tabellenrand in HTML.

HTML-Rand links HTML-Rand links Sep 04, 2024 pm 04:48 PM

Anleitung zum HTML-Rand links. Hier besprechen wir einen kurzen Überblick über HTML margin-left und seine Beispiele sowie seine Code-Implementierung.

Verschachtelte Tabelle in HTML Verschachtelte Tabelle in HTML Sep 04, 2024 pm 04:49 PM

Dies ist eine Anleitung für verschachtelte Tabellen in HTML. Hier diskutieren wir anhand der entsprechenden Beispiele, wie man eine Tabelle innerhalb der Tabelle erstellt.

HTML-Tabellenlayout HTML-Tabellenlayout Sep 04, 2024 pm 04:54 PM

Leitfaden zum HTML-Tabellenlayout. Hier besprechen wir die Werte des HTML-Tabellenlayouts zusammen mit den Beispielen und Ausgaben im Detail.

HTML-Eingabeplatzhalter HTML-Eingabeplatzhalter Sep 04, 2024 pm 04:54 PM

Leitfaden für HTML-Eingabeplatzhalter. Hier besprechen wir die Beispiele für HTML-Eingabeplatzhalter zusammen mit den Codes und Ausgaben.

Text in HTML verschieben Text in HTML verschieben Sep 04, 2024 pm 04:45 PM

Anleitung zum Verschieben von Text in HTML. Hier besprechen wir eine Einführung, wie Marquee-Tags funktionieren, mit Syntax und Beispielen für die Implementierung.

HTML-geordnete Liste HTML-geordnete Liste Sep 04, 2024 pm 04:43 PM

Leitfaden zur HTML-geordneten Liste. Hier besprechen wir auch die Einführung von HTML-geordneten Listen und Typen sowie deren Beispiele

HTML-Onclick-Button HTML-Onclick-Button Sep 04, 2024 pm 04:49 PM

Anleitung zum HTML-OnClick-Button. Hier diskutieren wir deren Einführung, Funktionsweise, Beispiele und Onclick-Events in verschiedenen Veranstaltungen.

See all articles