HTML5-Tutorium: Canvas: Hello World 01: Unterschied zwischen den Versionen
Kowa (Diskussion | Beiträge) |
Kowa (Diskussion | Beiträge) |
||
Zeile 6: | Zeile 6: | ||
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 | 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> | 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> | Canvas-Element durchzuführen.<ref>[https://www.khronos.org/webgl/ WebGL: OpenGL ES 2.0 for the Web]</ref> | ||
Version vom 26. Oktober 2016, 14:02 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-Context[2] 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.[3]
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.