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

aus GlossarWiki, der Glossar-Datenbank der Fachhochschule Augsburg
← zur vorherigen Versionen-Differenzzur nächsten Versionen-Differenz →
Kowa (Diskussion | Beiträge)
Administrator, Bots, Bürokraten, emailconfirmed, Oberflächenadministratoren, interwiki, oversight, SMW-Administratoren, SMW-Kuratoren, SMW-Editoren, Oversighter, Administratoren
42.989 Bearbeitungen
Kowa (Diskussion | Beiträge)
Administrator, Bots, Bürokraten, emailconfirmed, Oberflächenadministratoren, interwiki, oversight, SMW-Administratoren, SMW-Kuratoren, SMW-Editoren, Oversighter, Administratoren
42.989 Bearbeitungen
Zeile 76: Zeile 76:
===<code>main.css</code>===
===<code>main.css</code>===
Erstellen Sie im Ordner <code>WebContent/css</code> des Projektes die Datei <code>main.css</code>:
Erstellen Sie im Ordner <code>WebContent/css</code> des Projektes die Datei <code>main.css</code>:
====Inhalt von <code>main.css</code>====


<source lang="css">
<source lang="css">

Version vom 21. September 2012, 11:56 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

Ergebnis: hello.html (SVN-Repository)

HTML5: Hello-<name>-Anwendung mit Canvas

Die in 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.

Musterlösung herunterladen

(Dieser Punkt kann übersprungen werden.)

Laden Sie die Musterlösunglösung http://glossar.hs-augsburg.de/beispiel/tutorium/html5_canvas/hello_world/html5_canvas_hello_world_02/ auf bekannte Weise in Eclipse.

Neues Projekt anlegen

Legen Sie ein neues Projekt an:

  1. Datei → Neu → Statisches Web-Projekt
  2. Project name: HelloWorldCanvas02 → Fertigstellen
  3. Im Menü am oberen Rand: Klick auf Projekt → Eigenschaften → Codierung der Textdatei: Klick auf Sonstige → UTF-8 selektieren

Speichern Sie Ihr Projekt wiederum in Ihrem Repository:

  1. Projektexplorer: Rechtsklick auf HelloWorldCanvas02 → Team → Projekt gemeinsam nutzen
  2. SVN → Weiter
  3. Url: https://praktikum.multimedia.hs-augsburg.de/svn/ACCOUNT (ACCOUNT durch eigenen RZ-Account ersetzen) → Weiter
  4. Use specified folder name: mmprog/tutorium/HelloWorldCanvas02 → Fertigstellen

Projekt im Repository sichern

Das neu angelegte Projekt wird als erstes im Repositotry gesichert:

  1. Im Projektexplorer: Rechtsklick auf HelloWorldCanvas02 → Team → Commit
  2. Comment: Neues Projekt angelegt.
  3. OK

Dateien erstellen

main.js

Erstellen Sie im Ordner WebContent/js des Projektes die Datei main.js. Diese Datei enthält nun zwei Funktionen:

  • init: Diese wird nach dem Laden det HTML-Seiten in einen Browser aufgerufen, um die Zeichenbühne (canvas) zu initialisieren.
  • sayHello: Diese wird aufgerufen, sobald der Benutzer seinen Namen eingegeben und den OK-Button gedrückt hat.

Inhalt von main.js

var v_canvas; 
var v_context; 

/** Inisialisiert die Zeichenbühnen (Canvas) */
function init()
{
  v_canvas  = document.getElementById("d_canvas");
  v_context = v_canvas.getContext("2d");

  v_canvas.width  = 300;
  v_canvas.height =  27;
}
   
/**
 * Löscht den aktuellen Inhalt von der Zeichenbühne
 * und schreibt dann eine Begrüßung in die Zeichenbühne.
 * Der Name des Benutzers wird aus einem Eingabefeld von der HTML-Seite gelesen.
 */ 
function sayHello()
{
  v_context.clearRect(0, 0, v_canvas.width, v_canvas.height); // clear canvas
  v_context.font = "bold 20px 'Times New Roman', Times, serif";
  v_context.fillText("Hello, " + document.d_form.d_name.value + "!", 5, 20);
}

main.css

Erstellen Sie im Ordner WebContent/css des Projektes die Datei main.css:

Inhalt von main.css

/* Die Zeichnenbühne wird mit Hilfe eines Rands optisch hervorgehoben. */
canvas
{
  border-color: #BBBBBB; 
  border-width: 2px; 
  border-style: solid; 
}

hello.html

Erstellen Sie im Ordner WebContent des Projektes die Datei hello.html: 

<!DOCTYPE html>
<html>
  <head>
    <title>HTML5-Tutorium: Canvas: Hello World 02</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
    <link   rel="stylesheet"       href="css/main.css" />
    <script type="text/javascript" src="js/main.js"     ></script>
  </head>
  <body onload="init()">

    <!-- Die Zeichenbühne -->
    <canvas id="d_canvas">
      Your browser does not support canvas! 
    </canvas>

    <!-- Das Eingabeformular zur Eingabe des Benutzernamens -->
    <form name="d_form">
       <label>Your name:</label>
       <input name="d_name" type="text" value=""><br/>
       <input type="button" value="OK" onmousedown="sayHello()">
    </form>

  </body>
</html>

Testen und Sichern des Projektes

Testen Sie zunächst Ihr Projekt und sichern Sie dann das Ergebnis:

  1. Im Projektexplorer: Rechtsklick auf HelloWorldCanvas01 → Team → Commit
  2. Enter a comment for the commit operation: hello.html mit main.js und main.css wurden erstellt.
  3. OK

Anschließend sollten Sie ein wenig mit den drei Dateien experimentieren, indem Sie sinnvoll Änderungen vornehmen.

Speichern Sie auch Ihre Änderungen im Repository (mit kurzem, aber sinnvollem Kommentar!).

Optional: Apache oder Tomcat als Test-Server

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:

Definieren eines neuen Test-Servers:

  1. Projektexplorer: Rechtklick auf den Root-Ordner des aktuellen Projektes HelloWorldCanvas02 → Eigenschaften → Server → Standardserver: keine → OK
  2. Im Projektverzeichnis: hello.html selktieren → Klick auf Icon „grüner Kreis mit weißem Dreieck“ → Neuen Server manuell definieren selektieren → Severziel eingeben: HTTP Server selektieren → Weiter
  3. Hostname des Servers: localhost, Server name: HTTP Server (Apache) o.Ä, Serverlaufzeit: Klick auf Hinzufügen → Server name: HTTP Server (Apache) o.Ä., Publicshing Directory: c:\web\apache\htdocs (Webverzeichnis des Servers) → Fertigstellen → Weiter → evtl. Anpassungen vornehmen → Fertigstellen

Quellen

  1. Kowarschick (MMProg): Wolfgang Kowarschick; Vorlesung „Multimedia-Programmierung“; Hochschule: Hochschule Augsburg; Adresse: Augsburg; Web-Link; 2018; Quellengüte: 3 (Vorlesung)
  2. Canvas–Dive Into HTML5
  3. Musterlösung, Musterlösung (SVN)

Siehe auch

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