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 17: Zeile 17:
# Klick auf Icon „rotes Recheck“ (Server stoppen)
# Klick auf Icon „rotes Recheck“ (Server stoppen)
# Klick auf Icon „grüner Krei mit weißem Dreieck“ (Server starten)
# Klick auf Icon „grüner Krei mit weißem Dreieck“ (Server starten)
==Neues Projekt anlegen==
Legen Sie ein neues Projekt an
# <code>Datei</code> → <code>Neu</code> → <code>Statisches Web-Projekt</code>
# Project name: <code>HelloWorldCanvas02</code> → <code>Fertigstellen</code>
==Dateien erstellen==
Erstellen Sie im Ordner <code>WebContent</code> des neuen Projektes folgende beiden Dateien:
<code>js/main.js</code>
<source lang="javascript">
var v_context;
function init()
{
  var l_canvas  = document.getElementById("d_canvas");
  v_context = l_canvas.getContext("2d");
}
 
function sayHello()
{
  v_context.fillText("Hello, " + document.d_form.d_name.value + "!", 200, 100);
}
</source>
<code>hello.html</code>
<source lang="html4strict">
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World (Canvas 01)</title>
    <script src="js/main.js" type="text/javascript"></script>
  </head>
  <body onload="init()">
    <form name="d_form">
      <label>Dein Name:</label>
      <input name="d_name" type="text" value="">
      <input type="button" value="OK" onmousedown="sayHello()">
    </form>
    <canvas id="d_canvas" width="400" height="200">
      Ihr Browser unterstützt Canvas nicht.
    </canvas>
  </body>
</html>
</source>


=Quellen=
=Quellen=

Version vom 27. September 2011, 12:46 Uhr

Dieser Artikel wird derzeit von einem Autor gründlich bearbeitet. Die Inhalte sind daher evtl. noch inkonsistent.

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.

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 Krei 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

Erstellen Sie im Ordner WebContent des neuen Projektes folgende beiden Dateien:

js/main.js 

var v_context; 

function init()
{
   var l_canvas  = document.getElementById("d_canvas");
   v_context = l_canvas.getContext("2d");
}
   
function sayHello()
{
   v_context.fillText("Hello, " + document.d_form.d_name.value + "!", 200, 100);
}

hello.html 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World (Canvas 01)</title>
    <script src="js/main.js" type="text/javascript"></script>
  </head>
  <body onload="init()">
    <form name="d_form">
       <label>Dein Name:</label>
       <input name="d_name" type="text" value="">
       <input type="button" value="OK" onmousedown="sayHello()">
    </form>
    <canvas id="d_canvas" width="400" height="200">
      Ihr Browser unterstützt Canvas nicht. 
    </canvas>
  </body>
</html>

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

SVN-Repository-Verweise

Siehe auch

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