HTML5-Tutorium: Canvas: Hello World 01

aus GlossarWiki, der Glossar-Datenbank der Fachhochschule Augsburg

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

Inhalt | Teil 1 | Teil 2

Ergebnis: hello.html (SVN-Repository)

HTML5: Hello-Word-Anwendung mit Canvas

Zur Erstellung der Anwendung wird Eclipse eingesetzt. Alle Eclipse-Versionen ab Helios eignen sich zur Erstellung von HTML5-Web-Anwendungen.

Eclipse vorbereiten

(Dieser Punkt kann übersprungen werden, wenn man den Workspace http://glossar.hs-augsburg.de/svn/eclipse/workspace-mmprog heruntergeladen hat und in Eclipse als akutellen Workspace verwendet.)

Zunächst sollte man die „richtige“ Oberfläche auswählen:

  1. Fenster → Perspektive öffnen → Web (evtl. unter dem Punkt Andere... zu finden; Beachten Sie, es gibt zwei Web-Perspektiven; Wählen Sie diejenige, die die Weltkugel mit Stift als Icon hat)

Bei Eclipse-Versionen vor Juno muss außerdem 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

Musterlösung herunterladen

(Dieser Punkt kann übersprungen werden, wenn man den Workspace http://glossar.hs-augsburg.de/svn/eclipse/workspace-mmprog heruntergeladen hat und in Eclipse als akutellen Workspace verwendet.)

  1. Klick auf Reiter Datei → Importieren
  2. SVN aufklappen → Klick auf Checkout Projects from SVN → Weiter
  3. Entweder
  4. Weiter
  5. Nachden der Dateibaum aufgegangen ist: html5_canvas aufklappen → hello_world aufklappen → html5_canvas_hello_worl_01 selektieren
  6. Fertigstellen

Neues Projekt anlegen

  1. Datei → Neu → Statisches Web-Projekt
  2. Project name: HelloWorldCanvas01 → Fertigstellen
  3. Projektexplorer: Rechtsklick auf HelloWorldCanvas01 → Team → Projekt gemeinsam nutzen
  4. SVN → Weiter →
  5. Url: https://praktikum.multimedia.hs-augsburg.de/svn/ACCOUNT (ACCOUNT durch eigenen RZ-Account ersetzen; es kann auch jedes andere SVN-Repository verwendet werden) → Weiter
  6. Use specified folder name: mmprog/tutorium → Fertigstellen
  7. Hackchen bei Entscheidung merken → Nein (Nicht Ja!!!!)

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 File (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>
    <title>HTML5-Tutorium: Canvas: Hello World 01</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
    <script type="text/javascript">
      function init()
      {
        var l_canvas  = document.getElementById("d_canvas");
        var l_context = l_canvas.getContext("2d");
 
        l_canvas.width  = 300;
        l_canvas.height =  27;

        l_context.font = "bold 20px 'Times New Roman', Times, serif";
        l_context.fillText("Hello, world!", 5, 20);
      }
    </script>
  </head>
  <body onload="init()">
    <canvas id="d_canvas">
      Ihr Browser unterstützt Canvas nicht.
    </canvas>
  </body>
</html>

Auf das Canvas-Element wird ausschließlich von JavaScript aus zugegriffen. Sollte ein Browser dieses Element nicht unterstützen, so wird der alternative HTML-Code innerhalb des Canvas-Element gerendert und ausgegeben. Hier könnte beispielsweise eine Flash-Anwendung ausgeführt werden.

Die Meta-Anweisung 

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">

dient dazu, dass der Inhalt der Seite auf einem Smartphone in der richtigen Größe angezeigt wird.

HTML-Seite testen

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

Beim zweiten Debugging-Aufruf kann man den gewünschten Server direkt aus einer Liste auswählen und diesen auch als Projektstandard festlegen, damit man nicht bei jedem Debugging-Vorgang erneut einen Server wählen muss:

  • Haken vor Server als Projektstandardeinstellung (nicht wieder fragen) → Fertigstellen

Allerdings wird mit jedem Klick des Debug-Icons (grüner Keris mit weißen Dreieck) ein neues Browserfenster in Eclipse geöffnet. Sinnvoller ist es daher, im bestehenden Browserfenster das Reload-Icon (zwei kreiförmig angeordnete Pfeile) anzuklicken, um Änderungen an einer der Web-Dateien sichtbar zu machen.

JavaScript-Code auslagern

Man sollte i. Allg. vermeiden, Javascript-Code direkt in eine HTML-Seite einzufügen. Diese Verknüpfung von View und Controll bringt nur Nachteile mit sich:

  • Der Code wird unübersichtlicher, da zwei unterschiedliche Sprachen gemischt werden (Impedance Mismatch).
  • Der JavaScript-Code kann nicht in mehreren HTML-Dateien eingesetzt werden (Don't Repeat Yourself).
  • Die Ladezeiten der einzelnen Seiten werden länger, wenn derselbe JavaScript-Code in unterschiedlichen Seinten eingebaut ist und für jede dieser Seiten erneut geladen werden muss.

Aus diesen Gründen sollte man den JavaScript-Code in eigene Dateien auslagern:

  1. Rechtsklick auf Ordner WebContent → Neu → Ordner → Ordnername: js → Fertigstellen
  2. Rechtsklick auf Ordner js → Neu → Datei → Dateiname: main.js → Fertigstellen

Inhalt der Datei main.js 

function init()
{
  var l_canvas  = document.getElementById("d_canvas");
  var l_context = l_canvas.getContext("2d");
 
  l_canvas.width  = 300;
  l_canvas.height =  27;

  l_context.font = "bold 20px 'Times New Roman', Times, serif";
  l_context.fillText("Hello, world!", 5, 20);
}

Geänderter Inhalt der Datei hello.html 

<!DOCTYPE html>
<html>
  <head>
    <title>HTML5-Tutorium: Canvas: Hello World 01</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
    <script type="text/javascript" src="js/main.js"></script>
  </head>
  <body onload="init()">
    <canvas id="d_canvas">
      Ihr Browser unterstützt Canvas nicht.
    </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
  3. HTML5 Canvas Text Tutorial
  4. Musterlösung, Musterlösung (SVN)

Siehe auch

Abgerufen von „https://glossar.hs-augsburg.de/w/index.php?title=HTML5-Tutorium:_Canvas:_Hello_World_01&oldid=23395“