HTML5-Tutorium: Canvas: Hello World 01 - Versionsgeschichte

Kowa am 1. März 2023 um 13:20 Uhr

2023-03-01T13:20:17Z

← Nächstältere Version		Version vom 1. März 2023, 13:20 Uhr
Zeile 16:		Zeile 16:
	Allerdings erfolgt die Ausgabe diesmal mit Hilfe eines Canvas-Elements.		Allerdings erfolgt die Ausgabe diesmal mit Hilfe eines Canvas-Elements.

	==Erstellen eines neuen ~~Projektes~~==		==Erstellen eines neuen Projekts==
	Erstellen Sie ein neues Projekt „<code>HelloWorldCanvas01</code>“.		Erstellen Sie ein neues Projekt „<code>HelloWorldCanvas01</code>“.
	Kopieren Sie anschließend die Dateien „<code>index.html</code>“ und „<code>main.css</code>“		Kopieren Sie anschließend die Dateien „<code>index.html</code>“ und „<code>main.css</code>“

Kowa: /* main.js */

2016-10-26T15:23:39Z

main.js

← Nächstältere Version		Version vom 26. Oktober 2016, 15:23 Uhr
Zeile 80:		Zeile 80:

	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>		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>
	(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.)		(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.)

	<source lang="javascript">		<source lang="javascript">

Kowa: /* index.html */

2016-10-26T14:54:26Z

index.html

← Nächstältere Version		Version vom 26. Oktober 2016, 14:54 Uhr
Zeile 21:		Zeile 21:
	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.		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.

	==<code>index.html</code>==		==<code>index.html</code> und <code>main.css</code>==

	Ersetzen Sie das Body-Element Ihrer HTML-Datei durch folgendes Body-Element:		Ersetzen Sie das Body-Element Ihrer HTML-Datei durch folgendes Body-Element:
Zeile 39:		Zeile 39:
	wird am Endes des Dokuments die JavaScript-Datei „<code>main.js</code>“		wird am Endes des Dokuments die JavaScript-Datei „<code>main.js</code>“
	eingelesen.		eingelesen.

			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.)

			<source lang="css">
			#canvas
			{
			border: 1px solid black;
			}
			</source>

	==<code>main.js</code>==		==<code>main.js</code>==

Kowa am 26. Oktober 2016 um 14:40 Uhr

2016-10-26T14:40:01Z

← Nächstältere Version		Version vom 26. Oktober 2016, 14:40 Uhr
Zeile 12:		Zeile 12:

	Wie im [[HTML5-Tutorium: JavaScript: Hello World 01\|ersten]] und		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.		[[HTML5-Tutorium: JavaScript: Hello World 02\|zweiten Teil]] des Hello-World-Tutoriums soll die ganze Welt begrüßt werden.

	Allerdings erfolgt die Ausgabe diesmal mit Hilfe eines Canvas-Elements.		Allerdings erfolgt die Ausgabe diesmal mit Hilfe eines Canvas-Elements.

Kowa am 26. Oktober 2016 um 14:37 Uhr

2016-10-26T14:37:50Z

← Nächstältere Version		Version vom 26. Oktober 2016, 14:37 Uhr
Zeile 11:		Zeile 11:
	==Use Cases==		==Use Cases==

	Wie im [~~https~~:~~//glossar.hs-augsburg.de/beispiel/tutorium/es5/hello_world/WK_HelloWorld01/~~ ersten] und		Wie im [[HTML5-Tutorium: JavaScript: Hello World 01\|ersten]] und
	[~~https~~:~~//glossar.hs-augsburg.de/beispiel/tutorium/es5/hello_world/WK_HelloWorld02/~~ zweiten] Teil des Hello-World-Tutoriums soll die ganze Welt begrüßt werden.		[[HTML5-Tutorium: JavaScript: Hello World 02\|zweiten]] Teil des Hello-World-Tutoriums soll die ganze Welt begrüßt werden.

	Allerdings erfolgt die Ausgabe diesmal mit Hilfe eines Canvas-Elements.		Allerdings erfolgt die Ausgabe diesmal mit Hilfe eines Canvas-Elements.

Kowa: /* main.js */

2016-10-26T14:34:23Z

main.js

← Nächstältere Version		Version vom 26. Oktober 2016, 14:34 Uhr
Zeile 56:		Zeile 56:
	Man könnte sie auch direkt in HTML festlegen, aber die JavaScript-Lösung		Man könnte sie auch direkt in HTML festlegen, aber die JavaScript-Lösung
	ist flexibler. Es bestünde hier {{zB}} die Möglichkeit,		ist flexibler. Es bestünde hier {{zB}} die Möglichkeit,
	die Größe abhängig vom Ausgabedevice festzulegen.		die Größe abhängig vom Ausgabedevice festzulegen:

	<source lang="javascript">		<source lang="javascript">
Zeile 62:		Zeile 62:
	l_canvas.height = 60;		l_canvas.height = 60;
	</source>		</source>

			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		Für weiteren Aktionen benötigt man das Kontext-Objekt, mit dessen Hilfe
Zeile 80:		Zeile 82:

	<source lang="javascript">		<source lang="javascript">
	~~var~~ l_context = ~~l_canvas.getContext(~~'2d');		l_context.font = 'bold 40px "Times New Roman", Times, serif';
	</source>		</source>

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

	<source lang="javascript">		<source lang="javascript">
	l_context.~~font =~~ '~~bold 40px "Times New Roman"~~, ~~Times~~, ~~serif'~~;		l_context.fillText('Hello, World!', 35, 43);
	</source>		</source>
			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 „<code>main.js</code>“ somit folgendermaßen aus:		Insgesamt sieht die Datei „<code>main.js</code>“ somit folgendermaßen aus:

Kowa: /* main.js */

2016-10-26T13:35:52Z

main.js

@@ Zeile 69: / Zeile 69: @@
 (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.)
-'''<code>main.js</code>'''
+<source lang="javascript">
 <source lang="javascript">
 /**

Kowa: /* Quellen */

2016-10-26T13:29:49Z

Quellen

← Nächstältere Version		Version vom 26. Oktober 2016, 13:29 Uhr
Zeile 92:		Zeile 92:
	==Quellen==		==Quellen==
	<references/>		<references/>
	<ol start ="4">		<ol start ="6">
	<li> {{Quelle\|Kowarschick, W.: Multimedia-Programmierung}}</li>		<li> {{Quelle\|Kowarschick, W.: Multimedia-Programmierung}}</li>
	<li> http://www.html5canvastutorials.com/tutorials/html5-canvas-element/ HTML5 Canvas Text Tutorial]</li>		<li> http://www.html5canvastutorials.com/tutorials/html5-canvas-element/ HTML5 Canvas Text Tutorial]</li>

Kowa: /* index.html */

2016-10-26T13:29:38Z

index.html

@@ Zeile 23: / Zeile 23: @@
 ==<code>index.html</code>==
-Ersetzen Sie das Body-Element Ihrer HTML-Datei durch folgendes Body-Element_
+Ersetzen Sie das Body-Element Ihrer HTML-Datei durch folgendes Body-Element:
 <source lang="html5">
@@ Zeile 39: / Zeile 39: @@
 wird am Endes des Dokuments die JavaScript-Datei „<code>main.js</code>“
 eingelesen.
 ==Quellen==

Kowa: /* Erstellen eines neuen Projektes */

2016-10-26T13:12:31Z

Erstellen eines neuen Projektes

@@ Zeile 20: / Zeile 20: @@
 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.
 ==Quellen==