HTML5-Tutorium: Canvas: Hello World 02: Unterschied zwischen den Versionen
Kowa (Diskussion | Beiträge) |
Kowa (Diskussion | Beiträge) |
||
| Zeile 111: | Zeile 111: | ||
</source> | </source> | ||
=Apache oder Tomcat als Test-Server= | =Optional: Apache oder Tomcat als Test-Server= | ||
Anstelle des Eclipse-eigenen Testserver kann man auch einen beliebigen | Anstelle des Eclipse-eigenen Testserver kann man auch einen beliebigen | ||
Version vom 21. September 2012, 11:47 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
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:
Datei→Neu→Statisches Web-Projekt- Project name:
HelloWorldCanvas02→Fertigstellen - Im Menü am oberen Rand: Klick auf
Projekt→Eigenschaften→ Codierung der Textdatei: Klick aufSonstige→UTF-8selektieren
Speichern Sie Ihr Projekt wiederum in Ihrem Repository:
Projektexplorer: Rechtsklick aufHelloWorldCanvas02→Team→Projekt gemeinsam nutzenSVN→Weiter- Url:
https://praktikum.multimedia.hs-augsburg.de/svn/ACCOUNT(ACCOUNTdurch eigenen RZ-Account ersetzen) →Weiter - Use specified folder name:
mmprog/tutorium/HelloWorldCanvas02→Fertigstellen
Projekt im Repository sichern
Das neu angelegte Projekt wird als erstes im Repositotry gesichert:
- Im Projektexplorer: Rechtsklick auf
HelloWorldCanvas02→Team→Commit - Comment:
Neues Projekt angelegt. 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.
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:
/* 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()">
<canvas id="d_canvas">
Your browser does not support canvas!
</canvas>
<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>
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:
- Installation von Apache (Windows), Installation von Apache (Mac OS X), Installation von Apache (Unix)
- Installation von Tomcat (Windows), Installation von Tomcat (Mac OS X), Installation von Tomcat (Unix)
Definieren eines neuen Test-Servers:
- Projektexplorer: Rechtklick auf den Root-Ordner des aktuellen Projektes
HelloWorldCanvas02→Eigenschaften→Server→ Standardserver:keine→OK - Im Projektverzeichnis:
hello.htmlselktieren → Klick auf Icon „grüner Kreis mit weißem Dreieck“ →Neuen Server manuell definierenselektieren → Severziel eingeben:HTTP Serverselektieren →Weiter - Hostname des Servers:
localhost, Server name: HTTP Server (Apache) o.Ä, Serverlaufzeit: Klick aufHinzufügen→ Server name: HTTP Server (Apache) o.Ä., Publicshing Directory:c:\web\apache\htdocs(Webverzeichnis des Servers) →Fertigstellen→Weiter→ evtl. Anpassungen vornehmen →Fertigstellen
Quellen
- Kowarschick (MMProg): Wolfgang Kowarschick; Vorlesung „Multimedia-Programmierung“; Hochschule: Hochschule Augsburg; Adresse: Augsburg; Web-Link; 2018; Quellengüte: 3 (Vorlesung)
- Canvas–Dive Into HTML5
- Musterlösung, Musterlösung (SVN)
Siehe auch
