HTML5-Tutorium: Canvas: Hello World 01: Unterschied zwischen den Versionen
Kowa (Diskussion | Beiträge) |
Kowa (Diskussion | Beiträge) |
||
Zeile 20: | Zeile 20: | ||
Kopieren Sie anschließend die Dateien „<code>index.html</code>“ und „<code>main.css</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. | 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. | ||
==<code>index.html</code>== | |||
Ersetzen Sie das Body-Element Ihrer HTML-Datei durch folgendes Body-Element_ | |||
<source lang="html5"> | |||
<body> | |||
<canvas id="canvas"> | |||
Unfortunately, your browser doesn't support HTML5! | |||
</canvas> | |||
<script type = "text/javascript" src = "main.js"></script> | |||
</body> | |||
</source> | |||
Anstelle von HTML-Text-Elementen wie „<code>h1</code>“ und „<code>p</code>“ | |||
wird ein Canvas-Element zur Ausgabe von „Hello, World!“ verwendet. | |||
Da die Ausgabe des Textes nur mittels JavaScript-Anweisungen erfolgen kann, | |||
wird am Endes des Dokuments die JavaScript-Datei „<code>main.js</code>“ | |||
eingelesen. | |||
==Quellen== | ==Quellen== |
Version vom 26. Oktober 2016, 14:12 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.
index.html
Ersetzen Sie das Body-Element Ihrer HTML-Datei durch folgendes Body-Element_
<body>
<canvas id="canvas">
Unfortunately, your browser doesn't support HTML5!
</canvas>
<script type = "text/javascript" src = "main.js"></script>
</body>
Anstelle von HTML-Text-Elementen wie „h1
“ und „p
“
wird ein Canvas-Element zur Ausgabe von „Hello, World!“ verwendet.
Da die Ausgabe des Textes nur mittels JavaScript-Anweisungen erfolgen kann,
wird am Endes des Dokuments die JavaScript-Datei „main.js
“
eingelesen.
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.