HTML5-Tutorium: Canvas: Hello World 01: Unterschied zwischen den Versionen
Kowa (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
Kowa (Diskussion | Beiträge) |
||
| Zeile 2: | Zeile 2: | ||
'''Musterlösung''': [https://glossar.hs-augsburg.de/beispiel/tutorium/es5/hello_world_canvas/WK_HelloWorldCanvas01/index.html <code>index.html</code>] | '''Musterlösung''': [https://glossar.hs-augsburg.de/beispiel/tutorium/es5/hello_world_canvas/WK_HelloWorldCanvas01/index.html <code>index.html</code>] | ||
([https://glossar.hs-augsburg.de/beispiel/tutorium/es5/hello_world_canvas/WK_HelloWorldCanvas01/ SVN-Repository]) | ([https://glossar.hs-augsburg.de/beispiel/tutorium/es5/hello_world_canvas/WK_HelloWorldCanvas01/ SVN-Repository]) | ||
==Der Canvas== | |||
In HTML5 wurde das Canvas-Element eingeführt.<ref>[https://www.w3.org/TR/2009/WD-html5-20090825/the-canvas-element.html W3C: HTML 5: 4.8.11 The canvas element]</ref> Dieses Element stellt in einem HTML-Dokument eine „Bühne“ zur Verfügung, die mit [[Pixel|Pixeldaten]] (Bitmaps) gefüllt werden kann. Es gibt diverse | |||
Möglichkeiten Bitmaps zu erzeugen. Vom W3C wurde bislang lediglich der 2D-Context<ref><[https://www.w3.org/TR/2dcontext/ W3C: HTML Canvas 2D Context]/ref> standardisiert. Mit [[WebGL]] steht allerdings eine weitere Canvas-API zur Verfügung. Mit ihr ist es möglich, 3D-Rendering auf Basis von [[OpenGL]] in einem | |||
Canvas-Element durchzuführen.<ref>[https://www.khronos.org/webgl/ WebGL: OpenGL ES 2.0 for the Web]</ref> | |||
==Use Cases== | |||
Wie im [https://glossar.hs-augsburg.de/beispiel/tutorium/es5/hello_world/WK_HelloWorld01/ ersten] und | |||
[https://glossar.hs-augsburg.de/beispiel/tutorium/es5/hello_world/WK_HelloWorld02/ zweiten] Teil des Hello-World-Tutoriums soll die ganze Welt begrüßt werden. | |||
Allerdings erfolgt die Ausgabe diesmal mit Hilfe eines Canvas-Elements. | |||
==Erstellen eines neuen Projektes== | |||
Erstellen Sie ein neues Projekt „<code>HelloWorldCanvas01</code>“. | |||
Kopieren Sie anschließend die Dateien „<code>index.html</code>“ und „<code>main.css</code>“ | |||
aus dem [https://glossar.hs-augsburg.de/beispiel/tutorium/es5/hello_world/WK_HelloWorld02/ zweiten Teil des Tutoriums] und passen Sie den Titel in der HTML-Datei an. | |||
==Quellen== | ==Quellen== | ||
Version vom 26. Oktober 2016, 13:00 Uhr
Dieser Artikel erfüllt die GlossarWiki-Qualitätsanforderungen:
| Korrektheit: 4 (großteils überprüft) |
Umfang: 4 (unwichtige Fakten fehlen) |
Quellenangaben: 5 (vollständig vorhanden) |
Quellenarten: 5 (ausgezeichnet) |
Konformität: 4 (sehr gut) |
HTML-Tutorium Hello World: JavaScript | Canvas | SVG
Musterlösung: index.html
(SVN-Repository)
Der Canvas
In HTML5 wurde das Canvas-Element eingeführt.[1] Dieses Element stellt in einem HTML-Dokument eine „Bühne“ zur Verfügung, die mit Pixeldaten (Bitmaps) gefüllt werden kann. Es gibt diverse
Möglichkeiten Bitmaps zu erzeugen. Vom W3C wurde bislang lediglich der 2D-ContextReferenzfehler: Für ein <ref>-Tag fehlt ein schließendes </ref>-Tag.
Use Cases
Wie im ersten und zweiten Teil des Hello-World-Tutoriums soll die ganze Welt begrüßt werden.
Allerdings erfolgt die Ausgabe diesmal mit Hilfe eines Canvas-Elements.
Erstellen eines neuen Projektes
Erstellen Sie ein neues Projekt „HelloWorldCanvas01“.
Kopieren Sie anschließend die Dateien „index.html“ und „main.css“
aus dem zweiten Teil des Tutoriums und passen Sie den Titel in der HTML-Datei an.
Quellen
- Kowarschick (MMProg): Wolfgang Kowarschick; Vorlesung „Multimedia-Programmierung“; Hochschule: Hochschule Augsburg; Adresse: Augsburg; Web-Link; 2018; Quellengüte: 3 (Vorlesung)
- http://www.html5canvastutorials.com/tutorials/html5-canvas-element/ HTML5 Canvas Text Tutorial]
Siehe auch
- Pilgrim (2011): Mark Pilgrim; Canvas – Dive Into HTML5; http://diveintohtml5.info/; 2011; Quellengüte: 2 (Web)
- w3schools.com: HTML5
- HTML Living Standard
Fortsetzung des Tutoriums
Sie sollten nun Teil 2 des Tutoriums bearbeiten.
