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

aus GlossarWiki, der Glossar-Datenbank der Fachhochschule Augsburg
Keine Bearbeitungszusammenfassung
Zeile 1: Zeile 1:
{{HTML5-Tutorium:Canvas:HelloWorld:Menü}}
{{HTML5-Tutorium:Canvas:HelloWorld:Menü}}
'''Musterlösung''': [http://glossar.hs-augsburg.de/beispiel/tutorium/html5_canvas/hello_world/html5_canvas_hello_world_02/WebContent/hallo.html <code>hallo.html</code>]
'''Musterlösung''': [https://glossar.hs-augsburg.de/beispiel/tutorium/es5/hello_world_canvas/WK_HelloWorldCanvas02/index.html <code>index.html</code>]
([http://glossar.hs-augsburg.de/beispiel/tutorium/html5_canvas/hello_world/html5_canvas_hello_world_02 SVN-Repository])
([https://glossar.hs-augsburg.de/beispiel/tutorium/es5/hello_world_canvas/WK_HelloWorldCanvas02/ SVN-Repository])
hzuführen.<ref>[https://www.khronos.org/webgl/ WebGL: OpenGL ES 2.0 for the Web]</ref>


==Voraussetzung==
==Use Cases==


Sie sollten die Inhalte des Tutoriums [[HTML5-Tutorium: Canvas: Hello World 01]] kennen.
Wie im  [[HTML5-Tutorium: JavaScript: Hello World 01 ersten]] und 
HTML5-Tutorium: JavaScript: Hello World 02|zweiten]] Teil des Hello-World-Tutoriums soll die ganze Welt begrüßt werden.


==Ziel: Ausgabe von „Hallo <Benutzername>!“ auf einem HTML5-Canvas==
Allerdings erfolgt die Ausgabe diesmal mit Hilfe eines Canvas-Elements.
Die in [[HTML5-Tutorium: Canvas: Hello World 01|Teil 1]] erstellte Hello-World-Anwendung wird so erweitert,
dass der Benutzer seinen Namen eingeben kann und mit diesem
anschließend begrüßt wird. Außerdem wird das Canvas-Layout mit Hilfe von CSS modifiziert.


==Anwendung „<code>HelloWorldCanvas02</code>“==
==Erstellen eines neuen Projektes==
===Neues Projekt anlegen===
Erstellen Sie ein neues Projekt  „<code>HelloWorldCanvas01</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.


Legen Sie ein neues Projekt an:
==<code>index.html</code>==


* <code>Datei</code> → <code>Neu</code> → <code>Statisches Web-Projekt</code>
Ersetzen Sie das Body-Element Ihrer HTML-Datei durch folgendes Body-Element:
* Project name: <code>HelloWorldCanvas02</code> → <code>Fertigstellen</code>


Speichern Sie Ihr Projekt wiederum in Ihrem Repository:
<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>


* <code>Projektexplorer</code>: Rechtsklick auf <code>HelloWorldCanvas02</code> → <code>Team</code> → <code>Projekt gemeinsam nutzen</code>  
Anstelle von HTML-Text-Elementen wie „<code>h1</code>“ und „<code>p</code>“
* <code>SVN</code> → <code>Weiter</code>
wird ein Canvas-Element zur Ausgabe von „Hello, World!“ verwendet.
* Url: <code> https://praktikum.multimedia.hs-augsburg.de/svn/ACCOUNT</code> ('''<code>ACCOUNT</code> durch eigenen RZ-Account ersetzen''') → <code>Weiter</code>  
Da die Ausgabe des Textes nur mittels JavaScript-Anweisungen erfolgen kann,
* Use specified folder name: <code>mmprog/tutorium/HelloWorldCanvas02</code> → <code>Fertigstellen</code>
wird am Endes des Dokuments die JavaScript-Datei „<code>main.js</code>“
eingelesen.


===Projekt im Repository sichern===
==<code>main.js</code>==


Das neu angelegte Projekt wird als erstes im Repositotry gesichert:
Wie üblich wird die Web-Anwendung mit Hilfe der Datei „<code>main.js</code>“
initialisiert und gestartet.


* Im Projektexplorer: Rechtsklick auf <code>HelloWorldCanvas02</code> → <code>Team</code> → <code>Commit</code>
Viel muss hier nicht gemacht werden. Zunächst muss das
* Comment: <code>Neues Projekt angelegt.</code>
Canvas-Element, auf das der Text geschrieben werden soll,
* <code>OK</code>
aus dem HTML-Dokument geholt werden:


===Dateien erstellen===
<source lang="javascript">
var l_canvas = document.getElementById('canvas');
</source>


====<code>main.js</code>====
Die Größe diese Canvas-Elements kann per JavaScript festgelegt werden.
Erstellen Sie im Ordner <code>WebContent/js</code> des Projektes die Datei <code>main.js</code>.
Man könnte sie auch direkt in HTML festlegen, aber die JavaScript-Lösung
Diese Datei enthält nun zwei Funktionen:
ist flexibler. Es bestünde hier {{zB}}  die Möglichkeit,
* <code>init</code>: Diese wird nach dem Laden der HTML-Seiten in einen Browser aufgerufen, um die Zeichenbühne (<code>canvas</code>) zu initialisieren.
die Größe abhängig vom Ausgabedevice festzulegen:
* <code>sayHello</code>: Diese wird aufgerufen, sobald der Benutzer seinen Namen eingegeben und den OK-Button gedrückt hat.
 
=====Inhalt von <code>main.js</code>=====


<source lang="javascript">
<source lang="javascript">
"use strict"; /* Warne vor unsauberem JavaScript-Code! */
l_canvas.width  = 300;
l_canvas.height =  60;
var g_canvas,
    g_context;
/** Initialisiert die Bühne (Canvas). */
function init()
{ g_canvas        = document.getElementById("d_canvas");
  g_canvas.width  = 300;
  g_canvas.height =  27;
 
  g_context = g_canvas.getContext("2d");
}
/**
* Löscht den aktuellen Inhalt von der Bühne und schreibt dann einen Meldung
* auf die Bühne, bei der der Benutzer mit seinem Namen begrüßt wird.
* Der Name des Benutzers wird aus einem Eingabefeld der HTML-Seite gelesen.
*/
function sayHello()
{ // Textausgabe (auf der Bühne)
  g_context
    .clearRect(0, 0, g_canvas.width, g_canvas.height); // clear canvas
  g_context
    .font = "bold 20px 'Times New Roman', Times, serif";
  g_context
    .fillText("Hallo " + document.getElementById("d_name").value + "!", 5, 20);
}
</source>
</source>


====<code>main.css</code>====
Als Größeneinheit kommt das Pixelmaß zu Einsatz. Die Bühne dieses Canvas-Elements ist 300 Pixel breit und 60 Pixel hoch.  
Erstellen Sie im Ordner <code>WebContent/css</code> des Projektes die Datei <code>main.css</code>:


=====Inhalt von <code>main.css</code>=====
Für weiteren Aktionen benötigt man das Kontext-Objekt, mit dessen Hilfe
Pixelinformationen zu Canvas übermittelt werden sollen.


<source lang="css">
Wir verwenden zu diesem Zweck den 2D-Kontext. Das ist der einzige Kontext, der bislang vom [[W3C]] standardisiert wurde.<ref>[https://www.w3.org/TR/2dcontext/ W3C: HTML Canvas 2D Context]</ref>
/* Das Text-Eingabefeld wird optisch an die Bühne angepasst. */
(Eine Alternative wäre der [[WebGL]]-Kontext, der das Rendern von 3D-Objekten mit Hilde von OpenGL unterstützt.<ref>[ https://www.khronos.org/webgl/ Kronos Group: WebGL]</ref> Das führt hier aber zu weit.)
#d_name
{ width: 185px;
}


/* Die Bühne wird mit Hilfe eines Rands optisch hervorgehoben. */
<source lang="javascript">
#d_canvas
var l_context = l_canvas.getContext('2d');
{ margin-top:  10px;  
 
  border-color: #BBBBBB;
  border-width: 2px;
  border-style: solid;
}
</source>
</source>


====<code>hallo.html</code>====
Es gibt diverse 2D-Context-Befehle, die keine direkte Auswirkung auf die Bühne haben, sondern nur bestimmte Werte
Erstellen Sie im Ordner <code>WebContent</code> des Projektes die Datei <code>hallo.html</code>,
für nachfolgende Befehle festlegen. Typische Werte sind die Vordergrundfarbe, die Hintergrundfarbe, die Strichstärken, Fonteigenschaften etc.
die den Benutzer nach seinem Namen fragt und diesen, nachdem der Benutzer einen OK-Button
Die einmal eingestellten Werte werden solange verwendet, biss sie durch andere Anweisungen überschreiben werden.  
gedrückt hat, zur Begrüßung des Benutzers verwendet.


=====Inhalt von <code>hallo.html</code>=====
Da wir einen Text ausgeben wollen, sollten wir zuvor geeignete Fonteigenschaften auswählen:


<source lang="html4strict">
<source lang="javascript">
<!DOCTYPE html>
l_context.font = 'bold 40px "Times New Roman", Times, serif';
<html>
</source>
  <head>


    <!-- Titel der HTML-Seite; wird i. Allg. im Browser im Reiter angezeigt -->
Nun muss der Text nur noch auf der Bühne des Canvas-Elements ausgegeben werden.  
    <title>HTML5-Tutorium: Canvas: Hello World 02</title>


    <!-- Als HTML-Encoding sollte man stets UTF-8 verwenden. -->
<source lang="javascript">
    <meta charset="UTF-8">
l_context.fillText('Hello, World!', 35, 43);
</source>
Zusätzlich zum Text werden eine $x$- und eine $y$-Koordinate angegeben. Der Punkt $(x,y) = (0,0)$
bezeichnet die linke obere Ecke des Canvas-Elements. Größere $x$-Werte bezeichnen Punkte, die weiter rechts liegen, größere
$y$-Werte bezeichnen Punkte, die – im Gegensatz zum mathematischen Koordinatensystem – weiter unter liegen.
Der Referenzpunkt des Textes ist das linke Ende der Grundlinie des Zeichensatzes.


    <!-- Korrektes Skalieren der Seite auf einem mobilen Endgerät -->
Insgesamt sieht die Datei „<code>main.js</code>“ somit folgendermaßen aus:
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<source lang="javascript">
/**
* Initializes and starts the web app.
*/
(function()
{
  // Initialize the canvas.
  var l_canvas = document.getElementById('canvas');


    <!-- Laden aller CSS-Dateien -->
  l_canvas.width  = 300;
    <link rel="stylesheet" href="css/main.css"/>
  l_canvas.height = 60;


    <!-- Laden aller JavaScript-Dateien -->
  // Print text on the canvas.
    <script type="text/javascript" src="js/main.js"></script>
  var l_context = l_canvas.getContext('2d');


   </head>
   l_context.font = 'bold 40px "Times New Roman", Times, serif';
  <body onload="init()">
  l_context.fillText('Hello, World!', 35, 43);
 
}());
    <!-- Das Eingabeformular zur Eingabe des Benutzernamens -->
    <form >
      <label>Ihr Name:</label>
      <input id="d_name" type="text"  value=""                          />
      <input            type="button" value="OK" onmousedown="sayHello()"/>
    </form>
 
    <!-- Die Bühne -->
    <canvas id="d_canvas">
      Ihr Browser unterstützt HTML5 leider nicht!
    </canvas>
 
  </body>
</html>
</source>
</source>


===Testen und Sichern des Projektes===
==Quellen==
<references/>
<ol start ="6">
<li> {{Quelle|Kowarschick, W.: Multimedia-Programmierung}}</li>
<li> http://www.html5canvastutorials.com/tutorials/html5-canvas-element/ HTML5 Canvas Text Tutorial]</li>
</ol>


Testen Sie zunächst Ihr Projekt und sichern Sie dann das Ergebnis:
==Siehe auch==
 
* {{SieheAuch|Pilgrim (2011)}}
* Im Projektexplorer: Rechtsklick auf <code>HelloWorldCanvas02</code> → <code>Team</code> → <code>Commit</code>
* [http://www.w3schools.com/html/html5_intro.asp w3schools.com: HTML5]
* Enter a comment for the commit operation: <code>hallo.html mit main.js und main.css wurden erstellt.</code>
* [https://html.spec.whatwg.org/ HTML Living Standard]
* <code>OK</code>
 
Anschließend sollten Sie ein wenig mit den drei Dateien experimentieren, indem Sie
sinnvolle und fehlerhafte Änderungen vornehmen. Löschen Sie z.B. die Zeilen mit dem Aufruf
der Funktion <code>clearRect</code> aus der Datei <code>main.js</code> und testen Sie Ihre
Anwendung erneut. (Tipp: Geben Sie mehrmals hintereinander jeweils einen anderen Namen ein.)
 
Speichern Sie zu guter Letzt Ihre sinnvollen Änderungen auch im Repository (mit kurzem, aber sinnvollem Kommentar!).
 
==Apache als Test-Server (optional)==
 
Anstelle des Eclipse-eigenen Testserver kann man auch einen beliebigen
anderen Server (wie z.B. [[Apache]] oder [[Tomcat]]) zum Testen einer Web-Anwendung verwenden.
Der Vorteil dieser Variante ist, dass man den Zielserver gemäß seinen Bedürfnissen wählen und konfigurieren kann
und dass die Anwendung von Anfang an auf dem richtigen Server getestet wird.
 
Voraussetzung ist, dass ein entsprechender Server lokal installiert wurde:
* [[Installation von Apache (Windows)]], [[Installation von Apache (Mac OS X)]], [[Installation von Apache (Unix)]]
 
Der Apache-Server muss laufen, sonst funktioniert der nachfolgende Test nicht!
 
Definieren eines neuen Apache-Test-Servers in Eclipse (nachdem der Apache installiert und gestartet wurde):
 
* Im Projektverzeichnis: <code>hallo.html</code> selektieren → Klick auf Icon „grüner Kreis mit weißem Dreieck“ → <code>Run on Server</code> → <code>OK</code>
* <code>Neuen Server manuell definieren</code> selektieren → Severziel eingeben: <code>HTTP Server</code> selektieren
* Hostname des Servers: <code>localhost</code>, Server name: <code>Apache</code> → <code>Weiter</code>
* Publishing Directory: <code>C:\web\apache\htdocs</code> (Webverzeichnis des Servers, abhängig davon, wohin Sie den Apache installiert haben) → <code>Weiter</code>
* evtl. Anpassungen vornehmen → <code>Fertigstellen</code>
 
Beim nächsten Aufruf von <code>Run on Server</code> wird der Server <code>Apache</code> unter der Liste der vorhandenen Server aufgeführt.
Man sollte diesen Server wählen und dann das Häckchen vor <code>Server als Projektstandardeinstellung festlegen</code> setzen,
damit man die Serverwahl nicht bei jedem Test erneu ausführen muss.
 
Als Browser wird der in Eclipse integrierte Browser verwendet.
Besser ist es den Firefox als Standardbrowser zu verwenden:
 
* Klick auf <code>Fenster</code> → Klick auf <code>Web</code> → Klick auf <code>Web</code> → Klick auf <code>Firefox</code>
 
Ein Problem bleibt bestehen: Bei jedem Aufruf von <code>Run on Server</code> wird in Eclipse oder Firefox ein neues
Browserfester geöffnet. Um dies zu verhindern, kann man folgenden Trick anwenden, '''nachdem''' <code>Run on Server</code> zum ersten Mal ausgeführt worden ist:
 
* Im mittleren unteren Fenster den Reiter <code>Server</code> selektieren
* <code>Apache</code> aufklappen und selektieren
* Wenn dort nicht <code>synchronisiert</code>, sondern <code>Erneut publizieren</code> steht: Im unteren mittleren Fenster: Klick auf das vierte Icon von rechts (<code>Auf dem Server bereitstellen</code>)
* Sobald beim <code>Apache</code> wieder <code>synchronisiert</code> steht, kann im Browserfester der Reload-Button gedrückt werden, um die neuen Daten abzufrufen. (Eventuell muss der [http://de.wikipedia.org/wiki/Hilfe:Cache Browser-Cache geleert] werden.)
 
==Quellen==
<noinclude>
* {{Quelle|Kowarschick, W.: Multimedia-Programmierung}}</noinclude>


==Fortsetzung des Tutoriums==
==Fortsetzung des Tutoriums==


Sie sollten nun [[HTML5-Tutorium: Canvas: Hello World 03|Teil 3 des Tutoriums]] bearbeiten.
Sie sollten nun [[HTML5-Tutorium: Canvas: Hello World 02|Teil 2 des Tutoriums]] bearbeiten.
 
[[Kategorie: HTML5-Tutorium: Canvas: Hello World]][[Kategorie: HTML5-Beispiel]][[Kategorie:Kapitel:Multimedia-Programmierung:Beispiele]]
[[Kategorie: HTML5-Tutorium: Canvas: Hello World]][[Kategorie: HTML5-Beispiel]][[Kategorie:Kapitel:Multimedia-Programmierung:Beispiele]]

Version vom 26. Oktober 2016, 16:36 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

Inhalt | Teil 1 | Teil 2

Musterlösung: index.html (SVN-Repository) hzuführen.[1]

Use Cases

Wie im HTML5-Tutorium: JavaScript: Hello World 01 ersten und HTML5-Tutorium: JavaScript: Hello World 02|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.

main.js

Wie üblich wird die Web-Anwendung mit Hilfe der Datei „main.js“ initialisiert und gestartet.

Viel muss hier nicht gemacht werden. Zunächst muss das Canvas-Element, auf das der Text geschrieben werden soll, aus dem HTML-Dokument geholt werden: 

var l_canvas = document.getElementById('canvas');

Die Größe diese Canvas-Elements kann per JavaScript festgelegt werden. Man könnte sie auch direkt in HTML festlegen, aber die JavaScript-Lösung ist flexibler. Es bestünde hier z. B. die Möglichkeit, die Größe abhängig vom Ausgabedevice festzulegen: 

l_canvas.width  = 300;
l_canvas.height =  60;

Als Größeneinheit kommt das Pixelmaß zu Einsatz. Die Bühne dieses Canvas-Elements ist 300 Pixel breit und 60 Pixel hoch.

Für weiteren Aktionen benötigt man das Kontext-Objekt, mit dessen Hilfe Pixelinformationen zu Canvas übermittelt werden sollen.

Wir verwenden zu diesem Zweck den 2D-Kontext. Das ist der einzige Kontext, der bislang vom W3C standardisiert wurde.[2] (Eine Alternative wäre der WebGL-Kontext, der das Rendern von 3D-Objekten mit Hilde von OpenGL unterstützt.[3] Das führt hier aber zu weit.) 

var l_context = l_canvas.getContext('2d');

Es gibt diverse 2D-Context-Befehle, die keine direkte Auswirkung auf die Bühne haben, sondern nur bestimmte Werte für nachfolgende Befehle festlegen. Typische Werte sind die Vordergrundfarbe, die Hintergrundfarbe, die Strichstärken, Fonteigenschaften etc. Die einmal eingestellten Werte werden solange verwendet, biss sie durch andere Anweisungen überschreiben werden.

Da wir einen Text ausgeben wollen, sollten wir zuvor geeignete Fonteigenschaften auswählen: 

l_context.font = 'bold 40px "Times New Roman", Times, serif';

Nun muss der Text nur noch auf der Bühne des Canvas-Elements ausgegeben werden. 

l_context.fillText('Hello, World!', 35, 43);

Zusätzlich zum Text werden eine $x$- und eine $y$-Koordinate angegeben. Der Punkt $(x,y) = (0,0)$ bezeichnet die linke obere Ecke des Canvas-Elements. Größere $x$-Werte bezeichnen Punkte, die weiter rechts liegen, größere $y$-Werte bezeichnen Punkte, die – im Gegensatz zum mathematischen Koordinatensystem – weiter unter liegen. Der Referenzpunkt des Textes ist das linke Ende der Grundlinie des Zeichensatzes.

Insgesamt sieht die Datei „main.js“ somit folgendermaßen aus: 

/**
 * Initializes and starts the web app.
 */
(function()
{
  // Initialize the canvas.
  var l_canvas = document.getElementById('canvas');

  l_canvas.width  = 300;
  l_canvas.height =  60;

  // Print text on the canvas.
  var l_context = l_canvas.getContext('2d');

  l_context.font = 'bold 40px "Times New Roman", Times, serif';
  l_context.fillText('Hello, World!', 35, 43);
}());

Quellen

  1. ↑ WebGL: OpenGL ES 2.0 for the Web
  2. ↑ W3C: HTML Canvas 2D Context
  3. ↑ [ https://www.khronos.org/webgl/ Kronos Group: WebGL]
  1. Kowarschick (MMProg): Wolfgang Kowarschick; Vorlesung „Multimedia-Programmierung“; Hochschule: Hochschule Augsburg; Adresse: Augsburg; Web-Link; 2018; Quellengüte: 3 (Vorlesung)
  2. http://www.html5canvastutorials.com/tutorials/html5-canvas-element/ HTML5 Canvas Text Tutorial]

Siehe auch

Fortsetzung des Tutoriums

Sie sollten nun Teil 2 des Tutoriums bearbeiten.

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