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

aus GlossarWiki, der Glossar-Datenbank der Fachhochschule Augsburg
Keine Bearbeitungszusammenfassung
 
(135 dazwischenliegende Versionen von 2 Benutzern werden nicht angezeigt)
Zeile 1: Zeile 1:
{{HTML5-Tutorium:Canvas:HelloWorld:Menü}}
{{HTML5-Tutorium:Canvas:HelloWorld:Menü}}
'''Ergebnis''': <code>[http://glossar.hs-augsburg.de/beispiel/tutorium/html5_canvas/hello_world/html5_canvas_hello_world_01/WebContent/hello.html hello.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])
=HTML5: Hello-Word-Anwendung mit Canvas=


Zur Erstellung der Anwendung wird [[Installation von Eclipse (Windows)|Eclipse]] eingesetzt.
==Der Canvas==
Alle Eclipse-Versionen ab Helios eignen sich zur Erstellung von HTML5-Web-Anwendungen.


==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
(Dieser Punkt kann übersprungen werden, wenn man den Workspace http://glossar.hs-augsburg.de/svn/eclipse/workspace-mmprog heruntergeladen hat und in Eclipse als akutellen Workspace verwendet.)
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>


Zunächst sollte man die „richtige“ Oberfläche auswählen:
==Use Cases==


# <code>Fenster</code> → <code>Perspektive öffnen</code> → <code>Web</code> (evtl. unter dem Punkt <code>Andere...</code> zu finden; '''Beachten Sie, es gibt zwei Web-Perspektiven; Wählen Sie diejenige, die die Weltkugel mit Stift als Icon hat''')
Wie im  [[HTML5-Tutorium: JavaScript: Hello World 01|ersten]] und 
[[HTML5-Tutorium: JavaScript: Hello World 02|zweiten Teil]] des Hello-World-Tutoriums soll die ganze Welt begrüßt werden.


Bei '''Eclipse-Versionen vor Juno''' muss außerdem der Character Code korrekt eingestellt werden:
Allerdings erfolgt die Ausgabe diesmal mit Hilfe eines Canvas-Elements.


# <code>Fenster</code> → <code>Benutzervorgaben</code> → <code>Web</code> aufklappen -> <code>HTML-Files</code> selektieren
==Erstellen eines neuen Projekts==
# Codierung: <code>ISO Latin-1</code> durch <code>ISO 10646/Unicode(UTF-8)</code> ersetzen
Erstellen Sie ein neues Projekt  „<code>HelloWorldCanvas01</code>“.
# <code>OK</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.


==Musterlösung herunterladen==
==<code>index.html</code> und <code>main.css</code>==
(Dieser Punkt kann übersprungen werden, wenn man den Workspace http://glossar.hs-augsburg.de/svn/eclipse/workspace-mmprog heruntergeladen hat und in Eclipse als akutellen Workspace verwendet.)


# Klick auf Reiter <code>Datei</code> → <code>Importieren</code>
Ersetzen Sie das Body-Element Ihrer HTML-Datei durch folgendes Body-Element:
# <code>SVN</code> aufklappen → Klick auf <code>Checkout Projects from SVN</code> → <code>Weiter</code>
# Entweder
#* <code>Use existing repository location:</code> und <code>http://glossar.hs-augsburg.de/svn/tutorium</code> selektieren (falls vorhanden)
#* <code>Create a new repsotiory location</code> wählen → <code>Weiter</code> → Url: <code>http://glossar.hs-augsburg.de/svn/tutorium</code>
# <code>Weiter</code>
# Nachden der Dateibaum aufgegangen ist: <code>html5_canvas</code> aufklappen → <code>hello_world</code> aufklappen → <code>html5_canvas_hello_worl_01</code> selektieren
# <code>Fertigstellen</code>


==Neues Projekt anlegen==
<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>


# <code>Datei</code> → <code>Neu</code> → <code>Statisches Web-Projekt</code>
Anstelle von HTML-Text-Elementen wie „<code>h1</code>“ und „<code>p</code>“
# Project name: <code>HelloWorldCanvas01</code> → <code>Fertigstellen</code>
wird ein Canvas-Element zur Ausgabe von „Hello, World!“ verwendet.
# <code>Projektexplorer</code>: Rechtsklick auf <code>HelloWorldCanvas01</code> → <code>Team</code> → <code>Projekt gemeinsam nutzen</code>
Da die Ausgabe des Textes nur mittels JavaScript-Anweisungen erfolgen kann,
# <code>SVN</code> → <code>Weiter</code> →
wird am Endes des Dokuments die JavaScript-Datei „<code>main.js</code>“
# Url: <code> https://praktikum.multimedia.hs-augsburg.de/svn/ACCOUNT</code> (<code>ACCOUNT</code> durch eigenen RZ-Account ersetzen; es kann auch jedes andere SVN-Repository verwendet werden) → <code>Weiter</code>  
eingelesen.
# Use specified folder name: <code>mmprog/tutorium</code> → <code>Fertigstellen</code>
# Hackchen bei <code>Entscheidung merken</code> → '''<code>Nein</code>''' (Nicht <code>Ja</code>!!!!)


==Neue HTML-Datei anlegen==
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.)


# Im Projektexplorer (linkes Fenster): <code>HelloWorldCanvas01</code> aufklappen
<source lang="css">
# Rechtsklick auf Ordner <code>WebContent</code> → <code>Neu</code> → <code>HTML file</code>
#canvas
# Dateiname: <code>hello.html</code> → <code>Weiter</code> → Templates: <code>New HTML File (5)</code> → <code>Fertigstellen</code>
{
  border: 1px solid black;
}
</source>


==HTML-Datei bearbeiten==
==<code>main.js</code>==


Erfassen Sie folgenden Code in der HTML-Seite:
Wie üblich wird die Web-Anwendung mit Hilfe der Datei „<code>main.js</code>“
initialisiert und gestartet.


<source lang="html4strict">
Viel muss hier nicht gemacht werden. Zunächst muss das
<!DOCTYPE html>
Canvas-Element, auf das der Text geschrieben werden soll,  
<html>
aus dem HTML-Dokument geholt werden:
  <head>
    <title>HTML5-Tutorium: Canvas: Hello World 01</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
    <script type="text/javascript">
      function init()
      {
        var l_canvas  = document.getElementById("d_canvas");
        var l_context = l_canvas.getContext("2d");
        l_canvas.width  = 300;
        l_canvas.height =  27;


        l_context.font = "bold 20px 'Times New Roman', Times, serif";
<source lang="javascript">
        l_context.fillText("Hello, world!", 5, 20);
var l_canvas = document.getElementById('canvas');
      }
    </script>
  </head>
  <body onload="init()">
    <canvas id="d_canvas">
      Ihr Browser unterstützt Canvas nicht.
    </canvas>
  </body>
</html>
</source>
</source>


Auf das Canvas-Element wird ausschließlich von [[JavaScript]] aus zugegriffen.
Die Größe diese Canvas-Elements kann per JavaScript festgelegt werden.
Sollte ein Browser dieses Element nicht unterstützen, so wird der alternative
Man könnte sie auch direkt in HTML festlegen, aber die JavaScript-Lösung
HTML-Code innerhalb des Canvas-Element gerendert und ausgegeben. Hier
ist flexibler. Es bestünde hier {{zB}}  die Möglichkeit,
könnte beispielsweise eine [[Flash]]-Anwendung ausgeführt werden.
die Größe abhängig vom Ausgabedevice festzulegen:


Die Meta-Anweisung
<source lang="javascript">
<source lang="html4strict">
l_canvas.width = 300;
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
l_canvas.height = 60;
</source>
</source>
dient dazu, dass der Inhalt der Seite auf einem Smartphone in der richtigen Größe angezeigt wird.


====Anmerkung====
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>hello.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>Projektexprlorer</code> muss jeweils vor dem Server-Aufruf <code>hello.html</code> selektiert worden sein, 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===
<source lang="javascript">
var l_context = l_canvas.getContext('2d');
</source>


Für einfache HTML-Dateien funktioniert auch der interne Web-Server von Eclipse.
Es gibt diverse 2D-Context-Befehle, die keine direkte Auswirkung auf die Bühne haben, sondern nur bestimmte Werte
Als Serverziel müssten Sie dann <code>Run on Server</Server> an Stelle von
für nachfolgende Befehle festlegen. Typische Werte sind die Vordergrundfarbe, die Hintergrundfarbe, die Strichstärken, Fonteigenschaften etc.
<code>JavaScript Web Application</code> auswählen:
Die einmal eingestellten Werte werden solange verwendet, biss sie durch andere Anweisungen überschreiben werden.
* 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>
* <code>HTTP Preview</code> → <code>Fertigstellen</code>


Beachten Sie, dass mit jedem Klick des Debug-Icons (grüner Keris mit weißen Dreieck) ein neues Browserfenster in Eclipse geöffnet wird.
Da wir einen Text ausgeben wollen, sollten wir zuvor geeignete Fonteigenschaften auswählen:
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
<source lang="javascript">
mit Eclipse verknüpfen. Für Tomcat ist dies unter [[Installation von Eclipse#Intergration_von_tomcat]] beschrieben.
l_context.font = 'bold 40px "Times New Roman", Times, serif';
</source>
'''Solange Sie nur HRML-Seiten, die JavaScript-Code enthalten, testen wollen, ist das Serverziel <code>JavaScript Web Application</code> die beste Wahl.'''


==JavaScript-Code auslagern==
Nun muss der Text nur noch auf der Bühne des Canvas-Elements ausgegeben werden.


Man sollte i. Allg. vermeiden, Javascript-Code direkt in eine HTML-Seite einzufügen.
<source lang="javascript">
Diese Verknüpfung von [[View]] und [[Control]] bringt nur Nachteile mit sich:
l_context.fillText('Hello, World!', 35, 43);
* Der Code wird unübersichtlicher, da zwei unterschiedliche Sprachen gemischt werden ([[Impedance Mismatch]]).
</source>
* Der JavaScript-Code kann nicht in mehreren HTML-Dateien eingesetzt werden ([[Don't Repeat Yourself]]).
Zusätzlich zum Text werden eine $x$- und eine $y$-Koordinate angegeben. Der Punkt $(x,y) = (0,0)$
* 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.
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.


Aus diesen Gründen sollte man den JavaScript-Code in eigene Dateien auslagern:
Insgesamt sieht die Datei „<code>main.js</code>“ somit folgendermaßen aus:
 
# 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>
<source lang="javascript">
<source lang="javascript">
function init()
/**
* Initializes and starts the web app.
*/
(function()
{
{
   var l_canvas = document.getElementById("d_canvas");
  // Initialize the canvas.
  var l_context = l_canvas.getContext("2d");
   var l_canvas = document.getElementById('canvas');
 
   l_canvas.width  = 300;
   l_canvas.width  = 300;
   l_canvas.height =  27;
   l_canvas.height =  60;


   l_context.font = "bold 20px 'Times New Roman', Times, serif";
   // Print text on the canvas.
   l_context.fillText("Hello, world!", 5, 20);
   var l_context = l_canvas.getContext('2d');
}
</source>


Geänderter Inhalt der Datei <code>hello.html</code>
  l_context.font = 'bold 40px "Times New Roman", Times, serif';
<source lang="html4strict">
   l_context.fillText('Hello, World!', 35, 43);
<!DOCTYPE html>
}());
<html>
   <head>
    <title>HTML5-Tutorium: Canvas: Hello World 01</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
    <script type="text/javascript" src="js/main.js"></script>
  </head>
  <body onload="init()">
    <canvas id="d_canvas">
      Ihr Browser unterstützt Canvas nicht.
    </canvas>
  </body>
</html>
</source>
</source>


====Tipp====
==Quellen==
Benutzen Sie am Besten die Code-Vervollständigung (<code>Strg-Leerzeichen</code> bzw. <code>Crtl-Space</code>).
<references/>
 
<ol start ="6">
Beispiel:  
<li> {{Quelle|Kowarschick, W.: Multimedia-Programmierung}}</li>
# Klicken Sie im Editor-Fenster der Datei <code>main.js</code> in die leer Zeile 5 der Funktion <code>init</code>.
<li> http://www.html5canvastutorials.com/tutorials/html5-canvas-element/ HTML5 Canvas Text Tutorial]</li>
# Drücken Sie <code>Strg-Leerzeichen</code> und wählen Sie z.B. <code>l_canvas</code>.
</ol>
# 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.)
 
=Daten im Repository sichern=
 
* Im Projektexplorer: Rechtsklick auf <code>HelloWorldCanvas01</code> → <code>Team</code> → <code>Commit</code>
* <code>OK</code>


=Quellen=
==Siehe auch==
# {{Quelle|Kowarschick, W.: Multimedia-Programmierung}}
* {{SieheAuch|Pilgrim (2011)}}
# [http://blog.webagesolutions.com/archives/419 Coding HTML5 Pages Using Eclipse]
* [http://www.w3schools.com/html/html5_intro.asp w3schools.com: HTML5]
# [http://www.html5canvastutorials.com/tutorials/html5-canvas-text/ HTML5 Canvas Text Tutorial]
* [https://html.spec.whatwg.org/ HTML Living Standard]
# [http://glossar.hs-augsburg.de/beispiel/tutorium/html5_canvas/hello_world/html5_canvas_hello_world_01/WebContent/ Musterlösung], [http://glossar.hs-augsburg.de/webdav/tutorium/html5_canvas/hello_world/html5_canvas_hello_world_01/ Musterlösung (SVN)]


=Siehe auch=
==Fortsetzung des Tutoriums==
* [http://diveintohtml5.info/canvas.html Canvas–Dive Into HTML5]
* [http://www.w3schools.com/html5/ w3schools.com: HTML5 Tutorial]
* [http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html HTML Living Standard — The canvas element]


<noinclude>[[Kategorie: HTML5-Tutorium: Canvas: Hello World]][[Kategorie: HTML5-Beispiel]][[Kategorie:Kapitel:Multimedia-Programmierung:Beispiele]]
Sie sollten nun [[HTML5-Tutorium: Canvas: Hello World 02|Teil 2 des Tutoriums]] bearbeiten.
</noinclude>
[[Kategorie: HTML5-Tutorium: Canvas: Hello World]][[Kategorie: HTML5-Beispiel]][[Kategorie:Kapitel:Multimedia-Programmierung:Beispiele]]

Aktuelle Version vom 1. März 2023, 15:20 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

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 Projekts

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

  1. ↑ W3C: HTML 5: 4.8.11 The canvas element
  2. ↑ W3C: HTML Canvas 2D Context
  3. ↑ WebGL: OpenGL ES 2.0 for the Web
  4. ↑ W3C: HTML Canvas 2D Context
  5. ↑ Kronos Group: WebGL
  1. Kowarschick (MMProg): Wolfgang Kowarschick; Vorlesung „Multimedia-Programmierung“; Hochschule: Hochschule Augsburg; Adresse: Augsburg; Web-Link; 2018; Quellengüte: 3 (Vorlesung)
  2. 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.

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