HTML5-Tutorium: Canvas: Hello World 01

aus GlossarWiki, der Glossar-Datenbank der Fachhochschule Augsburg

Dieser Artikel wird derzeit von einem Autor gründlich bearbeitet. Die Inhalte sind daher evtl. noch inkonsistent.

Dieser Artikel erfüllt die GlossarWiki-Qualitätsanforderungen nur teilweise:

Korrektheit: 5
(vollständig überprüft) 		Umfang: 3
(einige wichtige Fakten fehlen) 		Quellenangaben: 4
(fast vollständig vorhanden) 		Quellenarten: 4
(sehr gut) 		Konformität: 5
(ausgezeichnet)

HTML5: Hello-Word-Anwendung mit Canvas

Zur Erstellung der Anwendung wird Eclipse (Indigo) eingesetzt. Die Vorgängerversion (Helios) eignet sich auch schon zur Erstellung von HTML5-Web-Anwendungen.

Eclipse vorbereiten

Zunächst muss der Character Code korrekt eingestellt werden:

  1. Fenster → Benutzervorgaben → Web aufklappen -> HTML-Files selektieren
  2. Codierung: ISO Latin-1 durch ISO 10646/Unicode(UTF-8) ersetzen
  3. OK

Außerdem sollte man die „richtige“ Oberfläche auswählen:

  1. Fenster → Perspektive öffnen → Web (evtl. unter dem Punkt Andere... zu finden)

Neues Projekt anlegen

  1. Datei → Neu → Statisches Web-Projekt
  2. Project name: HelloWorldCanvas01 → Fertigstellen

Neue HTML-Datei anlegen

  1. Im Projektexplorer (linkes Fenster): HelloWorldCanvas01 aufklappen
  2. Rechtsklick auf Ordner WebContent → Neu → HTML file
  3. Dateiname: hello.html → Weiter → Templates: New HTML Flie (5) → Fertigstellen

HTML-Datei bearbeiten

Benutzen Sie am Besten immer die Code-Vervollständigung (Strg-Leerzeichen bzw. Crtl-Space).

Beispiel:

  1. Klicken Sie im Editor-Fenster (mit der Überschrift hello.html)in die Leerzeile nach <body>
  2. Drücken Sie Strg-Leerzeichen und wäglen Sie <> canvas

Es gibt auch einen WYSIWYG-Editor, den Sie folgendermaßen öffnen können:

  1. Rechtklick in das Editor-Fenster → Öffnen mit → Web Page Editor

Erfassen Sie folgenden Code in der HTML-Seite: 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World (Canvas 01)</title>
    <script>
      function init()
      {
        var l_canvas  = document.getElementById("e_canvas");
        var l_context = l_canvas.getContext("2d");
      
        l_context.fillText("Hello World!", 200, 100);
      }
    </script>
  </head>
  <body onload="init()">
    <canvas id="e_canvas" width="400" height="200"></canvas>
  </body>
  </html>

HTML-Seite testen

  1. In der Icon-Zeile: Klick auf Icon „grüner Kreis mit weißen Dreieck“ → Serverziel auswählen: HTTP Preview → Fertigstellen

Beim zweien Debugging-Aufruf kann man den gewünschten Server direkt aus einer Liste auswählen.

Quellen

  1. Kowarschick (MMProg): Wolfgang Kowarschick; Vorlesung „Multimedia-Programmierung“; Hochschule: Hochschule Augsburg; Adresse: Augsburg; Web-Link; 2018; Quellengüte: 3 (Vorlesung)
  2. Coding HTML5 Pages Using Eclipse
  3. HTML5 Canvas Text Tutorial
Abgerufen von „https://glossar.hs-augsburg.de/w/index.php?title=HTML5-Tutorium:_Canvas:_Hello_World_01&oldid=19917“