|
|
| (36 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt) |
| 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_01/WebContent/hallo.html <code>hallo.html</code>] | | '''Musterlösung''': [https://glossar.hs-augsburg.de/beispiel/tutorium/es5/hello_world_canvas/WK_HelloWorldCanvas01/index.html <code>index.html</code>] |
| ([http://glossar.hs-augsburg.de/beispiel/tutorium/html5_canvas/hello_world/html5_canvas_hello_world_01 SVN-Repository]) | | ([https://glossar.hs-augsburg.de/beispiel/tutorium/es5/hello_world_canvas/WK_HelloWorldCanvas01/ SVN-Repository]) |
| =Ziel: Ausgabe von „Hallo Welt!“ auf einem HTML5-Canvas=
| |
|
| |
|
| Es soll eine einfache HTML5/JavaScript-Anwendung erstellt werden, die „Hallo Welt!“ auf einer HTML5-Bühne (Canvas) als Pixelgrafik ausgibt.
| | ==Der Canvas== |
|
| |
|
| =Eclipse vorbereiten=
| | In HTML5 wurde das Canvas-Element eingeführt.<ref>[https://www.w3.org/TR/2009/WD-html5-20090825/the-canvas-element.html W3C: HTML 5: 4.8.11 The canvas element]</ref> Dieses Element stellt in einem HTML-Dokument eine „Bühne“ zur Verfügung, die mit [[Pixel|Pixeldaten]] (Bitmaps) gefüllt werden kann. Es gibt diverse |
| | Möglichkeiten Bitmaps zu erzeugen. Vom W3C wurde bislang lediglich der 2D-Context<ref>[https://www.w3.org/TR/2dcontext/ W3C: HTML Canvas 2D Context]</ref> 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.<ref>[https://www.khronos.org/webgl/ WebGL: OpenGL ES 2.0 for the Web]</ref> |
|
| |
|
| Zur Erstellung der Anwendung wird [[Installation von Eclipse (Windows)|Eclipse]] eingesetzt.
| | ==Use Cases== |
|
| |
|
| '''Beim ersten Start von Eclipse werden Sie nach einem Workspace gefragt. Wählen Sie einen geeigneten Ordner aus:'''
| | Wie im [[HTML5-Tutorium: JavaScript: Hello World 01|ersten]] und |
| * Privater Rechner: z.B. <code>C:\web\mmprog</code>
| | [[HTML5-Tutorium: JavaScript: Hello World 02|zweiten Teil]] des Hello-World-Tutoriums soll die ganze Welt begrüßt werden. |
| * HSA-Rechner: z.B. <code>Z:\mmprog\workspace</code> (Wichtig ist, dass Sie das Laufwerk Z, das ist Ihr persönliches Benutzerverzeichnis, benutzen.)
| |
|
| |
|
| Zum Testen wird der Browser [[Firefox]] mit dem [https://addons.mozilla.org/de/firefox/addon/firebug/ Firebug-Plugin] verendet.
| | Allerdings erfolgt die Ausgabe diesmal mit Hilfe eines Canvas-Elements. |
|
| |
|
| Unter Eclipse kann der Testbrowser folgendermaßen festgelegt werden:
| | ==Erstellen eines neuen Projektes== |
| | 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. |
|
| |
|
| * <code>Fenster</code> → <code>Benutzervorgaben</code> → <code>Allgemein</code> aufklappen → <code>Webbrowser</code> selektieren → <code>Verwende externen Web-Browser</code> selektieren → Häckchen vor <code>Firefox</code> → <code>OK</code>
| | ==<code>index.html</code> und <code>main.css</code>== |
|
| |
|
| Zunächst sollte man die „richtige“ Oberfläche auswählen:
| | Ersetzen Sie das Body-Element Ihrer HTML-Datei durch folgendes Body-Element: |
|
| |
|
| * <code>Fenster</code> → <code>Perspektive öffnen</code> → <code>Web</code> (evtl. unter dem Punkt <code>Andere...</code> zu finden;
| | <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> |
|
| |
|
| '''Beachten Sie, es gibt zwei Web-Perspektiven. Wählen Sie diejenige, die die Weltkugel mit Stift als Icon hat.'''
| | 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. |
|
| |
|
| Außerdem muss der Character Code korrekt eingestellt werden:
| | In die Datei „<code>main.css</code>“ können Sie noch folgende Gestaltungsanweisung einfügen, die dafür sorgt, |
| | dass das Canvas-Element einen Rahmen erhält. Damit können Sie es besser erkennen. |
| | (Für die Anwendung selbst wäre ein rahmenloses Canvas-Element evtl. sogar besser geeignet.) |
|
| |
|
| * <code>Fenster</code> → <code>Benutzervorgaben</code> → <code>Allgemein</code> aufklappen → <code>Arbeitsbereich</code> selektieren
| | <source lang="css"> |
| * <code>Sonstige</code> selektieren → <code>UTF-8</code> im Drop-Down-Menü selektieren
| | #canvas |
| * <code>OK</code>
| | { |
| | border: 1px solid black; |
| | } |
| | </source> |
|
| |
|
| =Musterlösung herunterladen= | | ==<code>main.js</code>== |
|
| |
|
| Laden Sie die [http://glossar.hs-augsburg.de/beispiel/tutorium/html5_canvas/hello_world/html5_canvas_hello_world_01/ Musterlösung]
| | Wie üblich wird die Web-Anwendung mit Hilfe der Datei „<code>main.js</code>“ |
| in Eclipse:
| | initialisiert und gestartet. |
|
| |
|
| * Klick auf Reiter <code>Datei</code> → <code>Importieren</code>
| | Viel muss hier nicht gemacht werden. Zunächst muss das |
| * <code>SVN</code> aufklappen → Klick auf <code>Checkout Projects from SVN</code> → <code>Weiter</code>
| | Canvas-Element, auf das der Text geschrieben werden soll, |
| * Entweder
| | aus dem HTML-Dokument geholt werden: |
| ** <code>Use existing repository location:</code> und <code>http://glossar.hs-augsburg.de/beispiel/tutorium</code> selektieren (falls vorhanden)
| |
| ** <code>Create a new repsotiory location</code> wählen → <code>Weiter</code> → URL: <code>http://glossar.hs-augsburg.de/beispiel/tutorium</code>
| |
| * <code>Weiter</code>
| |
| * Nachden der Dateibaum aufgegangen ist: <code>html5_canvas</code> aufklappen → <code>hello_world</code> aufklappen → <code>html5_canvas_hello_world_01</code> selektieren
| |
| * <code>Fertigstellen</code>
| |
|
| |
|
| ==Anmerkung==
| | <source lang="javascript"> |
| | | var l_canvas = document.getElementById('canvas'); |
| Auf dieselbe Weise können Sie auch Ihre eigenen Projekte aus Ihrem eigenen Repository auf beliebige Rechner laden.
| |
| | |
| Wenn Sie mit der Bearbeitung Ihres Projektes auf einem Rechner aufhören, sollten Sie stets den
| |
| aktuellen Stand in Ihrem Repository sichern:
| |
| | |
| * Im Projektexplorer: Rechtsklick auf das aktuelle Projekt → Klick auf <code>Team</code> → Click auf <code>Commit</code>
| |
| | |
| Wenn Sie danach auf einem anderen Rechner an diesem Projekt weiterarbeiten wollen, müssen sie beim ersten MAl das Projekt in der
| |
| oben beschriebenen Weise aus dem Repository auf Ihren Rechner laden. Wenn Sie dies einmal gemacht haben, reicht es wen Sie künftig die
| |
| lokale Version auf dem Rechner aktualisieren, bevor Sie mit der Arbeit beginnen:
| |
| | |
| *Im Projektexplorer: Rechtsklick auf das aktuelle Projekt → Klick auf <code>Team</code> → Click auf <code>Update to HEAD</code>
| |
| | |
| =Anwendung „<code>HelloWorldCanvas01</code>“=
| |
| ==Neues Projekt anlegen==
| |
| | |
| * <code>Datei</code> → <code>Neu</code> → <code>Statisches Web-Projekt</code>
| |
| * Project name: <code>HelloWorldCanvas01</code> → <code>Fertigstellen</code>
| |
| * Eventuell: <code>Web</code>-Perspektive wählen
| |
| | |
| Speichern Sie nun Ihr Projekt in Ihrem Repository:
| |
| | |
| * <code>Projektexplorer</code>: Rechtsklick auf <code>HelloWorldCanvas01</code> → <code>Team</code> → <code>Projekt gemeinsam nutzen</code>
| |
| * <code>SVN</code> → <code>Weiter</code>
| |
| * <code>Create a new repository location</code> selektieren
| |
| * Url: <code><nowiki>https://praktikum.multimedia.hs-augsburg.de/svn/ACCOUNT</nowiki></code> ('''<code>ACCOUNT</code> durch eigenen RZ-Account ersetzen''') → <code>Weiter</code>
| |
| * Use specified folder name: <code>mmprog/tutorium/HelloWorldCanvas01</code> → <code>Fertigstellen</code>
| |
| * Beim ersten Mal: Klick auf <code>Accept permanently</code>
| |
| * Beim ersten Mal: Passwort eingeben → Häckchen bei <code>Passwort merken</code> (sonst muss man künftig für jede hozuladende Datei das Passwort eingeben) → <code>OK</code>
| |
| * '''Eventuell''': Häckchen bei <code>Entscheidung merken</code> → '''<code>Nein</code>''' (Nicht <code>Ja</code>!!!!)
| |
| | |
| ==Projekt im Repository sichern==
| |
| | |
| Das neu angelegte Projekt wird gleich mal im Repository gesichert:
| |
| | |
| * Im Projektexplorer: Rechtsklick auf <code>HelloWorldCanvas01</code> → <code>Team</code> → <code>Commit</code>
| |
| * Enter a comment for the commit operation: <code>Neues Projekt angelegt.</code>
| |
| * <code>OK</code>
| |
| | |
| ==Neue HTML-Datei anlegen==
| |
| | |
| * Im Projektexplorer (linkes Fenster): <code>HelloWorldCanvas01</code> aufklappen
| |
| * Rechtsklick auf Ordner <code>WebContent</code> → <code>Neu</code> → <code>HTML file</code>
| |
| * Dateiname: <code>hallo.html</code> → <code>Weiter</code> → Templates: <code>New HTML File (5)</code> → <code>Fertigstellen</code>
| |
| | |
| ==HTML-Datei bearbeiten==
| |
| | |
| In '''Juno''' sollten Sie zunächst den HTML-Editor durch einen etwas besseren ersetzen:
| |
| | |
| # HTML-Seite <code>hallo.html</code> im Editor-Fenster schließen
| |
| # Projektexplorer: Rechtsklick auf <code>hallo.html</code> → Klick auf <code>Öffnen mit</code>
| |
| # Wählen Sie nun den zweiten <code>HTML Editor</code> (Icon '''ohne''' Größer-/Kleiner-Zeichen, sondern mit angedeuteten Text-Zeilen)
| |
| | |
| Dieser HTML-Editor wird künfig für diese HTML-Datei als Standard-Editor verwendet.
| |
| Das heißt, er wird verwendet, wenn Sie künftig die Datei per Doppelklick
| |
| öffnen.
| |
| | |
| Erfassen Sie nun folgenden Code in der HTML-Seite:
| |
| | |
| <source lang="html4strict"> | |
| <!DOCTYPE html>
| |
| <html>
| |
| <head>
| |
| | |
| <!-- Titel der HTML-Seite; wird i. Allg. im Browser im Reiter angezeigt -->
| |
| <title>HTML5-Tutorium: Canvas: Hello World 01</title>
| |
| | |
| <!-- Als HTML-Encoding sollte man stets UTF-8 verwenden. -->
| |
| <meta charset="UTF-8">
| |
| | |
| <!-- Korrektes Skalieren der Seite auf einem mobilen Endgerät -->
| |
| <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
| |
|
| |
| <!-- Zeichnen von "Hallo Welt!" auf der Bühne
| |
| (nachdem die Seite geladen wurde). -->
| |
| <script type="text/javascript">
| |
| function init()
| |
| {
| |
| var l_canvas = document.getElementById("d_canvas");
| |
|
| |
| l_canvas.width = 300;
| |
| l_canvas.height = 27;
| |
|
| |
| var l_context = l_canvas.getContext("2d");
| |
|
| |
| l_context.font = "bold 20px 'Times New Roman', Times, serif";
| |
| l_context.fillText("Hallo Welt!", 5, 20);
| |
| }
| |
| </script>
| |
| | |
| </head>
| |
| | |
| <body onload="init()">
| |
| | |
| <!-- Die Bühne (Canvas) -->
| |
| <canvas id="d_canvas">
| |
| Ihr Browser unterstützt HTML5 leider nicht!
| |
| </canvas>
| |
| | |
| </body>
| |
| </html>
| |
| </source> | | </source> |
|
| |
|
| ====Anmerkung 1====
| | Die Größe diese Canvas-Elements kann per JavaScript festgelegt werden. |
| Auf das Canvas-Element wird ausschließlich von [[JavaScript]] aus zugegriffen.
| | Man könnte sie auch direkt in HTML festlegen, aber die JavaScript-Lösung |
| Sollte ein Browser dieses Element nicht unterstützen, so wird der alternative
| | ist flexibler. Es bestünde hier {{zB}} die Möglichkeit, |
| HTML-Code innerhalb des Canvas-Element gerendert und ausgegeben. Hier
| | die Größe abhängig vom Ausgabedevice festzulegen: |
| könnte beispielsweise eine [[Flash]]-Anwendung ausgeführt werden.
| |
|
| |
|
| ====Anmerkung 2====
| | <source lang="javascript"> |
| Die Meta-Anweisung
| | l_canvas.width = 300; |
| <source lang="html4strict"> | | l_canvas.height = 60; |
| <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
| |
| </source> | | </source> |
| dient dazu, dass der Inhalt der Seite auf einem Smartphone in der richtigen Größe angezeigt wird.
| |
|
| |
|
| ====Anmerkung 3====
| | Als Größeneinheit kommt das Pixelmaß zu Einsatz. Die Bühne dieses Canvas-Elements ist 300 Pixel breit und 60 Pixel hoch. |
| Es gibt auch einen WYSIWYG-Editor, den Sie folgendermaßen öffnen können:
| |
| * Rechtklick in das Editor-Fenster → <code>Öffnen mit</code> → <code>Web Page Editor</code>
| |
|
| |
|
| Allerdings unterstützt dieser WYSIWYG-Editor die HTML5-Zeichenbühne [[Canvas]] nicht und ist daher für dieses Tutorium nicht sonderlich nützlich.
| | Für weiteren Aktionen benötigt man das Kontext-Objekt, mit dessen Hilfe |
| | Pixelinformationen zu Canvas übermittelt werden sollen. |
|
| |
|
| ==HTML-Seite testen==
| | 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> |
| * <code>hallo.html</code> speichern: <code>Strg-s</code>
| | (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.) |
| * Wichtig: '''Im <code>Projektexplorer</code> jeweils vor dem Server-Aufruf <code>hallo.html</code> selektieren''', sonst erhalten Sie eine Fehlermeldung.
| |
| * In der Icon-Zeile: Klick auf Icon „grüner Kreis mit weißen Dreieck“ → Serverziel auswählen: <code>JavaScript Web Application</code>
| |
| * <code>OK</code>
| |
| | |
| ===Anmerkungen zum Firefox auf den Rechnern des MM-Labors===
| |
| | |
| Defaultmäßig kann der Firefox im MM-Labor nicht auf lokale Webserver (wie z.B. den Aptana-Server) zugreifen.
| |
| | |
| Grund: In diesem Firefox ist eine unpassende Proxy-Konfiguration voreingestellt.
| |
| Diese Einstellung verhindert den Zugriff auf localhost.
| |
| | |
| Lösung des Problems:
| |
| * Firefox starten
| |
| * Einstellungen → Erweitert → Netzwerk → Einstellungen
| |
| * Haken von <code>Proxy-Einstellungen des Systems verwenden</code> auf <code>Manuelle Proxy-Konfiguration</code> setzen und als Ausnahme <code>localhost und 127.0.0.1</code> einstellen.
| |
| | |
| ===Anmerkungen zum Test-Sever===
| |
| | |
| '''Solange Sie nur HTML-Seiten, die JavaScript-Code enthalten, testen wollen, ist das Serverziel <code>JavaScript Web Application</code> die beste Wahl.'''
| |
| | |
| Sie können allerdings auch andere Web-Server verwenden:
| |
| | |
| * Den HTTP-Preview-Server, der in Eclipse integriert ist (probieren Sie diesen ruhig einmal an Stelle des JavaScript-Web-Application-Servers aus)
| |
| * Tomcat (hier muss [[Installation von Tomcat|Tomcat]] installiert und mit [[Installation von Eclipse#Integration_von_Tomcat|Eclipse verknüpft]] werden)
| |
| * Apache (hier muss [[Installation von Apache|Apache]] installiert und mit Eclipse verknüpft werden; siehe [[HTML5-Tutorium: Canvas: Hello World 02#Optional:_Apache_als_Test-Server|Teil 2 des Tutoriums]])
| |
| * etc.
| |
| | |
| In allen diesen Fällen müssten Sie <code>Run on Server</code> an Stelle von
| |
| <code>JavaScript Web Application</code> auswählen:
| |
| * In der Icon-Zeile: Klick auf Icon „grüner Kreis mit weißen Dreieck“ → Serverziel auswählen: <code>Run on Server</code>
| |
| * <code>OK</code>
| |
| | |
| Den HTTP-Preview-Server wählen Sie folgendermaßen:
| |
| | |
| <ol start="3">
| |
| <li> <code>HTTP Preview</code> → <code>Fertigstellen</code></li>
| |
| </ol> | |
| | |
| Beachten Sie, dass beim HTTP-Preview-Server mit jedem Klick des Debug-Icons (grüner Kreis mit weißen Dreieck) ein neues Browserfenster in Eclipse geöffnet wird.
| |
| Daher ist es sinnvoller, im bestehenden Browserfenster das Reload-Icon (zwei kreiförmig angeordnete Pfeile) anzuklicken, um Änderungen an einer der
| |
| Web-Dateien sichtbar zu machen.
| |
| | |
| Für komplexere Web-Seiten mit [[PHP]]-Code, [[JSP]]-Code etc. muss man einen echten Server (wie [[Apache]] oder [[Tomcat]]) installieren und
| |
| mit Eclipse verknüpfen. | |
| | |
| Wenn der von Ihnen gewählte Test-Web-Server Probleme hat, die
| |
| neuen HTML-Seiten darzustellen, kann es notwendig sein, den Server neu zu starten:
| |
| | |
| * Reiter <code>Server</code> im unteren Fenster selektieren
| |
| * Klick auf Icon „rotes Recheck“ (Server stoppen)
| |
| * Klick auf Icon „grüner Kreis mit weißem Dreieck“ (Server starten)
| |
| | |
| ==Projekt im Repository sichern==
| |
| | |
| Jedes funktionierende Zwischenergebnis eines Projektes sollte im Repository gespeichert werden:
| |
| | |
| * Im Projektexplorer: Rechtsklick auf <code>HelloWorldCanvas01</code> → <code>Team</code> → <code>Commit</code>
| |
| * Enter a comment for the commit operation: <code>hallo.html, ein HTML5-JavaScript-Moloch wurde erstellt.</code>
| |
| * <code>OK</code>
| |
| | |
| ==JavaScript-Code auslagern==
| |
| | |
| Man sollte i. Allg. vermeiden, Javascript-Code direkt in eine HTML-Seite einzufügen.
| |
| Diese Verknüpfung von [[View]] und [[Control]] 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:
| |
| | |
| * Rechtsklick auf Ordner <code>WebContent</code> → <code>Neu</code> → <code>Ordner</code> → Ordnername: <code>js</code> → <code>Fertigstellen</code>
| |
| * Rechtsklick auf Ordner <code>js</code> → <code>Neu</code> → <code>Datei</code> → Dateiname: <code>main.js</code> → <code>Fertigstellen</code>
| |
| | |
| ===Inhalt der Datei <code>main.js</code>===
| |
| | |
| Wie bei HTML-Dateien können Sie auch für JavaScript eine alternativen Editor verwenden:
| |
| <code>JavaScript Source Editor</code>
| |
|
| |
|
| <source lang="javascript"> | | <source lang="javascript"> |
| "use strict"; /* Warne vor unsauberem JavaScript-Code! */
| | var l_context = l_canvas.getContext('2d'); |
| | |
| function init()
| |
| {
| |
| // Erzeugung und Initialisierung der Bühne (Canvas)
| |
| var l_canvas = document.getElementById("d_canvas");
| |
| | |
| l_canvas.width = 300;
| |
| l_canvas.height = 27;
| |
| | |
| // Textausgabe (auf der Bühne)
| |
| var l_context = l_canvas.getContext("2d");
| |
| | |
| l_context.font = "bold 20px 'Times New Roman', Times, serif";
| |
| l_context.fillText("Hallo Welt!", 5, 20);
| |
| }
| |
| </source> | | </source> |
|
| |
|
| ===Geänderter Inhalt der Datei <code>hallo.html</code>===
| | Es gibt diverse 2D-Context-Befehle, die keine direkte Auswirkung auf die Bühne haben, sondern nur bestimmte Werte |
| <source lang="html4strict">
| | für nachfolgende Befehle festlegen. Typische Werte sind die Vordergrundfarbe, die Hintergrundfarbe, die Strichstärken, Fonteigenschaften etc. |
| <!DOCTYPE html>
| | Die einmal eingestellten Werte werden solange verwendet, biss sie durch andere Anweisungen überschreiben werden. |
| <html>
| |
| <head>
| |
|
| |
|
| <!-- Titel der HTML-Seite; wird i. Allg. im Browser im Reiter angezeigt -->
| | Da wir einen Text ausgeben wollen, sollten wir zuvor geeignete Fonteigenschaften auswählen: |
| <title>HTML5-Tutorium: Canvas: Hello World 01</title>
| |
|
| |
|
| <!-- Als HTML-Encoding sollte man stets UTF-8 verwenden. -->
| | <source lang="javascript"> |
| <meta charset="UTF-8">
| | l_context.font = 'bold 40px "Times New Roman", Times, serif'; |
| | |
| <!-- Korrektes Skalieren der Seite auf einem mobilen Endgerät -->
| |
| <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
| |
| | |
| <!-- Laden aller JavaScript-Dateien -->
| |
| <script type="text/javascript" src="js/main.js"></script>
| |
| | |
| </head>
| |
| | |
| <body onload="init()">
| |
| | |
| <!-- Die Bühne (Canvas) -->
| |
| <canvas id="d_canvas">
| |
| Ihr Browser unterstützt HTML5 leider nicht!
| |
| </canvas>
| |
| | |
| </body>
| |
| </html>
| |
| </source> | | </source> |
|
| |
|
| ====Tipp====
| | Nun muss der Text nur noch auf der Bühne des Canvas-Elements ausgegeben werden. |
| Benutzen Sie am Besten die Code-Vervollständigung (<code>Strg-Leerzeichen</code> bzw. <code>Ctrl-Space</code>).
| |
| | |
| Beispiel:
| |
| * Klicken Sie testweise im Editor-Fenster der Datei <code>main.js</code> in die leere Zeile 5 der Funktion <code>init</code>.
| |
| * Drücken Sie <code>Strg-Leerzeichen</code> und wählen Sie z.B. <code>l_canvas</code>.
| |
| * Geben Sie einen Punkt (<code>.</code>) ein und drücken Sie erneut <code>Strg-Leerzeichen</code>.* Löschen Sie den eben erfassten Inhalt wieder. (Ihre Datei <code>main.js</code> sollte ja schon fertiggestellt gewesen sein.)
| |
| | |
| ==Projekt testen==
| |
| | |
| Testen Sie Ihr Projekt wieder, indem Sie es im Firefox öffen.
| |
| | |
| Häufig ist der JavaScript-Code bei den ersten Tests fehlerhaft. In diesen Fällen hilft einem
| |
| die JavaScript-Konsole, die z.B. über das Firefox-Plugin [https://addons.mozilla.org/de/firefox/addon/firebug/ Firebug] zugänglich ist, häufig weiter.
| |
| | |
| Fügen Sie folgenden Code am Ende des Rumpfes der <code>init</code>-Funktion ein:
| |
|
| |
|
| <source lang="javascript"> | | <source lang="javascript"> |
| console.log( "Canvas wurde erstellt: "
| | l_context.fillText('Hello, World!', 35, 43); |
| + l_canvas.width + "*" + l_canvas.height + " Pixel."
| |
| );
| |
| </source> | | </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. |
|
| |
|
| Wenn Sie nun die Anwendung erneut im Firefox ausführen, sehen Sie zunächst keine Veränderung.
| | Insgesamt sieht die Datei „<code>main.js</code>“ somit folgendermaßen aus: |
| | <source lang="javascript"> |
| | /** |
| | * Initializes and starts the web app. |
| | */ |
| | (function() |
| | { |
| | // Initialize the canvas. |
| | var l_canvas = document.getElementById('canvas'); |
|
| |
|
| Überprüfen Sie, ob Firebug im Firefox aktiviert wurde (Drop-Down-Menü beim Icon mit dem Bug (= Käfer) in der rechten oberen Ecke von Firefox).
| | l_canvas.width = 300; |
| | l_canvas.height = 60; |
|
| |
|
| Öffnen Sie nun das Firebug-Fenster (Icon mit dem Bug) und laden Sie die JavaScript-Anwendung erneut (Reload im Firefox).
| | // Print text on the canvas. |
| | var l_context = l_canvas.getContext('2d'); |
|
| |
|
| Nun sollten Sie im Konsolen-Fenster von Firebug einen Kommentar lesen können.
| | l_context.font = 'bold 40px "Times New Roman", Times, serif'; |
| | l_context.fillText('Hello, World!', 35, 43); |
| | }()); |
| | </source> |
|
| |
|
| Wenn alle Tests erfolgreich verlaufen sind, ist es sinnvoll, die
| | ==Quellen== |
| Konsolenausgaben mittels <code>//</code> oder <code>/* ... */</code> auszukommentieren.
| | <references/> |
| | | <ol start ="6"> |
| ==Projekt im Repository sichern== | | <li> {{Quelle|Kowarschick, W.: Multimedia-Programmierung}}</li> |
| | | <li> http://www.html5canvastutorials.com/tutorials/html5-canvas-element/ HTML5 Canvas Text Tutorial]</li> |
| Auch das Endergebnis des Projektes sollte im Repository gespeichert werden:
| |
| | |
| * Im Projektexplorer: Rechtsklick auf <code>HelloWorldCanvas01</code> → <code>Team</code> → <code>Commit</code>
| |
| * Enter a comment for the commit operation: <code>main.js wurde erstellt, zur Auslagerung des JS-Codes aus hallo.html.</code>
| |
| * <code>OK</code>
| |
| | |
| ==Repostitory begutachten==
| |
| | |
| Nun können Sie den Inhalt in Ihrem Repository betrachten.
| |
| | |
| * <code>Fenster</code> → <code>Perspektive öffnen</code> → <code>Andere</code>
| |
| * <code>SVN Repository Exploring</code> → <code>OK</code>
| |
| * Im Dateibaum (linkes Fenster) <code>https://praktikum.multimedia.hs-augsburg.de/svn/ACCOUNT</code> aufklappen → <code>mmprog</code> aufklappen → <code>tutorium</code> aufklappen → <code>HelloWorldCanvas01</code> aufklappen
| |
| | |
| Hier sehen Sie zunächst den Inhalt des von Ihnen gespeicherten Projektes.
| |
| Das Repository kann aber noch mehr. Sie können sich alle gespeicherten Versionen Ihres Projektes ansehen:
| |
| | |
| <ol start="4">
| |
| <li> Rechtsklick auf <code>HelloWorldCanvas01</code> aufklappen → <code>Show History</code></li>
| |
| </ol> | | </ol> |
|
| |
|
| Nun sehen Sie im Protokoll-Fester die verschiedenen Versionen des Projektes, mit Revisionsnummer, Author (ein Repository kann von mehreren Autoren gelichzeitig benutzt werden), sowie die von Ihnen eingegebenen Kommentare.
| | ==Siehe auch== |
| | |
| Als Letztes sollten Sie sich die Entwicklung der Datei <code>hallo.html</code> einmal näher ansehen:
| |
| | |
| <ol start="5">
| |
| <li> Im Dateibaum <code>WebContent</code> aufklappen → Rechtsklick auf <code>hallo.html</code> → <code>Show Revision Graph</code></li>
| |
| </ol>
| |
| | |
| Hier sehen Sie, dass es von dieser Datei zwei Versionen gibt. Diese können wir auch miteinander vergleichen:
| |
| | |
| <ol start="6">
| |
| <li> Im Dateibaum Rechtsklick auf <code>hallo.html</code> → <code>Compare</code> → <code>OK</code></li>
| |
| </ol>
| |
| | |
| In Vergleich der beiden Versionen erkennt mann, dass der JavaScript-Code durch einen Zugriff auf die Datei
| |
| <code>js/main.js</code> ersetzt wurde.
| |
| | |
| Kehren Sie nun in die normale Arbeitsumgebung zurück:
| |
| | |
| <ol start="7">
| |
| <li> In der Icon-Leiste oben rechts auf das Icon der Arbeitsumgebung (Perspektive) <code>Web</code> klicken.</li>
| |
| </ol>
| |
| | |
| Neben den Icon <code>Web</code> finden Sie jetzt auch ein Icon für die Arbeitsumgebung <code>SVN Repository Exploring</code>,
| |
| damit Sie künftig schneller in diese Perspektive wechseln können.
| |
| | |
| =Quellen= | |
| * {{Quelle|Kowarschick, W.: Multimedia-Programmierung}}
| |
| * [http://blog.webagesolutions.com/archives/419 Coding HTML5 Pages Using Eclipse]
| |
| * [http://www.html5canvastutorials.com/tutorials/html5-canvas-text/ HTML5 Canvas Text Tutorial]
| |
| | |
| =Siehe auch=
| |
| * {{SieheAuch|Pilgrim (2011)}} | | * {{SieheAuch|Pilgrim (2011)}} |
| * [http://www.w3schools.com/html5/ w3schools.com: HTML5 Tutorial] | | * [http://www.w3schools.com/html/html5_intro.asp w3schools.com: HTML5] |
| * [http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html HTML Living Standard — The canvas element] | | * [https://html.spec.whatwg.org/ HTML Living Standard] |
|
| |
|
| =Fortsetzung des Tutoriums= | | ==Fortsetzung des Tutoriums== |
|
| |
|
| Sie sollten nun [[HTML5-Tutorium: Canvas: Hello World 02|Teil 2 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]] |
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)
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 und main.css
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.
In die Datei „main.css“ können Sie noch folgende Gestaltungsanweisung einfügen, die dafür sorgt,
dass das Canvas-Element einen Rahmen erhält. Damit können Sie es besser erkennen.
(Für die Anwendung selbst wäre ein rahmenloses Canvas-Element evtl. sogar besser geeignet.)
#canvas
{
border: 1px solid black;
}
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.[4]
(Eine Alternative wäre der WebGL-Kontext, der das Rendern von 3D-Objekten mit Hilde von OpenGL unterstützt.[5] 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
- 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
Fortsetzung des Tutoriums
Sie sollten nun Teil 2 des Tutoriums bearbeiten.
