HTML-Tutorium: SVG: MiniPong 01: Unterschied zwischen den Versionen
Kowa (Diskussion | Beiträge) |
Kowa (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
||
| Zeile 4: | Zeile 4: | ||
([http://glossar.hs-augsburg.de/beispiel/tutorium/html_svg/minipong/htmlsvg_minipong_01 SVN-Repository]) | ([http://glossar.hs-augsburg.de/beispiel/tutorium/html_svg/minipong/htmlsvg_minipong_01 SVN-Repository]) | ||
=Ziel= | =Voraussetzung= | ||
Sie sollten die Inhalte der Tutorien [[HTML-Tutorium: SVG: Hello World]] und [[HTML5-Tutorium: Canvas: MiniPong 01]] kennen. | |||
=Ziel: Animation des Balls= | |||
Das in [[HTML5-Tutorium: Canvas: MiniPong]] erstellte MiniPong-Spiel wird so umgeschrieben, | Das in [[HTML5-Tutorium: Canvas: MiniPong]] erstellte MiniPong-Spiel wird so umgeschrieben, | ||
dass die Ausgabe der | dass die Ausgabe der Ball-Animation nicht nicht mit Hilfe von [[Pixelgrafik]]en sondern mit Hilfe von [[Vektorgrafik]]en (SVG) erfolgt. | ||
In diesem Tutorium wird wieder die JavaScript-Bibliothek Raphaël<ref>{{Quelle|Baranovskiy, D.: Raphaël (2008+) – JavaScript Library}}</ref> | In diesem Tutorium wird wieder die JavaScript-Bibliothek Raphaël<ref>{{Quelle|Baranovskiy, D.: Raphaël (2008+) – JavaScript Library}}</ref> | ||
| Zeile 20: | Zeile 24: | ||
<code>init</code> initialisiert, sobald die Raphaël-Bühne erzeugt wurde und per <code>p_canvas</code> übergeben werden kann. | <code>init</code> initialisiert, sobald die Raphaël-Bühne erzeugt wurde und per <code>p_canvas</code> übergeben werden kann. | ||
Alle künftigen Änderungen an diesem SVG-Objekt werden direkt auf der Bühne sichtbar. | Alle künftigen Änderungen an diesem SVG-Objekt werden direkt auf der Bühne sichtbar. | ||
=Quellen= | =Quellen= | ||
Version vom 25. Oktober 2012, 07:00 Uhr
Dieser Artikel erfüllt die GlossarWiki-Qualitätsanforderungen nur teilweise:
| Korrektheit: 3 (zu größeren Teilen überprüft) |
Umfang: 4 (unwichtige Fakten fehlen) |
Quellenangaben: 5 (vollständig vorhanden) |
Quellenarten: 5 (ausgezeichnet) |
Konformität: 5 (ausgezeichnet) |
HTML-Tutorium: Canvas | SVG
SVG: | Teil 1 | Teil 2 | Teil 3
Dieser Artikel wird derzeit von einem Autor gründlich bearbeitet. Die Inhalte sind daher evtl. noch inkonsistent.
Musterlösung: Minipong 1
(SVN-Repository)
Voraussetzung
Sie sollten die Inhalte der Tutorien HTML-Tutorium: SVG: Hello World und HTML5-Tutorium: Canvas: MiniPong 01 kennen.
Ziel: Animation des Balls
Das in HTML5-Tutorium: Canvas: MiniPong erstellte MiniPong-Spiel wird so umgeschrieben, dass die Ausgabe der Ball-Animation nicht nicht mit Hilfe von Pixelgrafiken sondern mit Hilfe von Vektorgrafiken (SVG) erfolgt.
In diesem Tutorium wird wieder die JavaScript-Bibliothek Raphaël[1] verwendet.
Wie in Teil 1 der Canvas-Version des Tutoriums werden zwei Objekte implementiert: Das ROOT-Objekt der Anwendung und das zu animierende Ball-Objekt.
miniatur|links|374px|Das Objektmodell der Raphaël-Version von MiniPong 01
Wenn man die Objektmodelle der Raphaël- und der Canvas-Version vergleicht, fallen einem nur zwei wesentliche Unterschiede auf.
In der Raphaël-Version fällt das g_context-Objekt weg, da es in Raphaël kein „Kontext“-Objekt gibt.
Anstatt dessen wird im Ball eine SVG-Version des Balls im Attribut svg gespeichert. Dieses Attribut wird mit Hilfe der Methode
init initialisiert, sobald die Raphaël-Bühne erzeugt wurde und per p_canvas übergeben werden kann.
Alle künftigen Änderungen an diesem SVG-Objekt werden direkt auf der Bühne sichtbar.
Quellen
- ↑ Baranovskiy (2008+): Dmitry Baranovskiy; Raphaël – JavaScript Library; http://dmitrybaranovskiy.github.io/raphael/; Quellengüte: 5 (Web)
- Braun (2011): Herbert Braun; Webanimationen mit Canvas; in: c't Webdesign; Band: 2011; Seite(n): 44–48; Verlag: Heise Zeitschriften Verlag; Adresse: Hannover; 2011; Quellengüte: 5 (Artikel)
- Kowarschick (MMProg): Wolfgang Kowarschick; Vorlesung „Multimedia-Programmierung“; Hochschule: Hochschule Augsburg; Adresse: Augsburg; Web-Link; 2018; Quellengüte: 3 (Vorlesung)
Fortsetzung des Tutoriums
Sie können nun Teil 2 des Tutoriums bearbeiten.
