HTML-Tutorium: SVG: MiniPong 01: 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 36: Zeile 36:
=Fortsetzung des Tutoriums=
=Fortsetzung des Tutoriums=


Bearbeiten Sie nun [[HTML5-Tutorium: Canvas: MiniPong 02|Teil 2 des Tutoriums]].
Sie können nun [[HTML5-Tutorium: Canvas: MiniPong 02|Teil 2 des Tutoriums]] bearbeiten.

Version vom 25. Oktober 2012, 06:45 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)

Ziel

Das in HTML5-Tutorium: Canvas: MiniPong erstellte MiniPong-Spiel wird so umgeschrieben, dass die Ausgabe der Begrüßung nicht als Pixelgrafik sondern als Vektorgrafik (SVG) ausgegeben wird.

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

miniatur|ohne|381px|Das Objektmodell der Canvas-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.

Voraussetzung

Sie sollten die Inhalte der Tutorien HTML-Tutorium: SVG: Hello World und HTML5-Tutorium: Canvas: MiniPong 01 kennen.

Quellen

  1. ↑ Baranovskiy (2008+): Dmitry Baranovskiy; Raphaël – JavaScript Library; http://dmitrybaranovskiy.github.io/raphael/; Quellengüte: 5 (Web)
  1. 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)
  2. 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.

Abgerufen von „https://glossar.hs-augsburg.de/w/index.php?title=HTML-Tutorium:_SVG:_MiniPong_01&oldid=24282“