HTML5-Tutorium: Canvas: Hello World 01: Unterschied zwischen den Versionen

aus GlossarWiki, der Glossar-Datenbank der Fachhochschule Augsburg
Zeile 48: Zeile 48:


<source lang="html4strict">
<source lang="html4strict">
<!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>
</source>
</source>


Version vom 26. September 2011, 19:02 Uhr

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: 0
(nicht überprüft) 		Umfang: 0
(viel zu gering) 		Quellenangaben: 0
(fehlen vollkommen) 		Quellenarten: 0
(ungenügend) 		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>

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
Abgerufen von „https://glossar.hs-augsburg.de/w/index.php?title=HTML5-Tutorium:_Canvas:_Hello_World_01&oldid=19912“