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 54: Zeile 54:


<source lang="css">
<source lang="css">
<!DOCTYPE html>
canvas
canvas
{
{

Version vom 18. Oktober 2011, 08: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

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.

Test-Server

Wenn der Test-Web-Server, der in Teil 1 des Tutoriums erstellt wurde, Probleme hat, die neuen HTML-Seiten darzustellen, kann es notwendig sein, den Server neu zu starten:

  1. Reiter Server im unteren Fenster selektieren
  2. Klick auf Icon „rotes Recheck“ (Server stoppen)
  3. Klick auf Icon „grüner Kreis mit weißem Dreieck“ (Server starten)

Neues Projekt anlegen

Legen Sie ein neues Projekt an:

  1. Datei → Neu → Statisches Web-Projekt
  2. Project name: HelloWorldCanvas02 → Fertigstellen

Dateien erstellen

main.js

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

var v_canvas; 
var v_context; 

function init()
{
  v_canvas  = document.getElementById("d_canvas");
  v_context = v_canvas.getContext("2d");

  v_canvas.width  = 300;
  v_canvas.height =  27;
}
   
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: 

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>

Apache als Test-Server

Anstelle des Eclipse-eigenen Testserver kann man auch einen belibigen 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

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