HTML-Tutorium: SVG: Hello World 01: Unterschied zwischen den Versionen

aus GlossarWiki, der Glossar-Datenbank der Fachhochschule Augsburg
Keine Bearbeitungszusammenfassung
 
(66 dazwischenliegende Versionen von 2 Benutzern werden nicht angezeigt)
Zeile 1: Zeile 1:
{{HTML5-Tutorium:SVG:HelloWorld:Menü}}
{{HTML-Tutorium:SVG:HelloWorld:Menü}}
'''Ergebnis''': [http://glossar.hs-augsburg.de/beispiel/tutorium/html5_svg/hello_world/html5_svg_hello_world_01/WebContent/hello.html <code>hello.html</code>]
'''Musterlösung''': [http://glossar.hs-augsburg.de/beispiel/tutorium/html_svg/hello_world/html_svg_hello_world_01/WebContent/hallo.html <code>hallo.html</code>]
([http://glossar.hs-augsburg.de/beispiel/tutorium/html5_svg/hello_world/html5_svg_hello_world_01 SVN-Repository])
([http://glossar.hs-augsburg.de/beispiel/tutorium/html_svg/hello_world/html_svg_hello_world_01 SVN-Repository])


{{In Bearbeitung}}
==Voraussetzung==
=HTML5: Hello-&lt;name&gt;-Anwendung mit Raphaël (SVG)=
 
Sie sollten die Inhalte des Tutoriums [[HTML5-Tutorium: Canvas: Hello World 01]] kennen.
 
==Ziel: Ausgabe von „Hallo Welt!“ als SVG-Grafik==
Die in [[HTML5-Tutorium: Canvas: Hello World]] erstellte Hello-World-Anwendung wird so umgeschrieben,
Die in [[HTML5-Tutorium: Canvas: Hello World]] erstellte Hello-World-Anwendung wird so umgeschrieben,
dass die Ausgabe der Begrüßung nicht als [[Pixelgrafik]] auf einer Zeichenbühne (Canvas) erfolgt, sondern  
dass die Ausgabe der Begrüßung nicht als [[Pixelgrafik]] sondern als [[Vektorgrafik]] ausgegeben wird.
als [[Vektorgrafik]]. Vektorgrafiken können in modernen Browsern mit [[SVG]] dargestellt werden.
Vektorgrafiken können in modernen Browsern mittels [[SVG]] dargestellt werden.
In diesem Tutorium wird die JavaScript-Bibliothek Raphaël<ref>{{Quelle|Baranovskiy, D.: Raphaël (2008+) – JavaScript Library}}</ref>
verwendet. Diese Bibliothek realisert Vektorgrafiken mit SVG in Browsern, die dies unterstützen. In Browsern,
die [[SVG]] nicht unterstützen (wie z.B. beim Internet Explorer 6.0.) wird automatisch ersatzweise [[VML]] verwendet.


==Musterlösung herunterladen==
In diesem Tutorium wird die JavaScript-Bibliothek Raphaël<ref>{{Quelle|Baranovskiy (2008+)}}</ref>
(Dieser Punkt kann übersprungen werden.)
verwendet. Diese Bibliothek stellt Vektorgrafiken mit Hilfe von SVG in Browsern dar, die dies unterstützen. In Browsern,
die [[SVG]] nicht unterstützen (wie z.B. der Internet Explorer 6.0) wird automatisch ersatzweise [[VML]] verwendet.
Das heißt, diese Anwendung funktioniert nicht nur in HTML5-Browsern, sondern auch in älteren HTML4-Browsern,
da Raphaël nur [[EcmaScript|EcmaScript 3]] an Stelle von  [[EcmaScript|EcmaScript 5]] voraussetzt.


Laden Sie die Musterlösung <code>http://glossar.hs-augsburg.de/beispiel/tutorium/html5_svg/hello_world/html5_svg_hello_world_01/</code>
==Anwendung „<code>HelloWorldSVG01</code>“==
auf [[HTML5-Tutorium: Canvas: Hello World 01#Musterl.C3.B6sung_herunterladen|bekannte Weise]] in Eclipse.
===Neues Projekt anlegen und speichern===


==Neues Projekt anlegen==
Legen Sie ein neues „Statisches Web-Projekt“ mit dem Namen <code>HelloWorldSVG01</code> an.


Legen Sie ein neues Projekt an:
Speichern Sie dieses Projekt wie üblich in Ihrem Repository.


# <code>Datei</code> → <code>Neu</code> → <code>Statisches Web-Projekt</code>
===Dateien erstellen===
# Project name: <code>HelloWorldSVG01</code> → <code>Fertigstellen</code>
# Im Menü am oberen Rand: Klick auf <code>Projekt</code> → <code>Eigenschaften</code>  → Klick auf <code>Ressource</code> → Codierung der Textdatei: Klick auf <code>Sonstige</code> → <code>UTF-8</code> selektieren


Speichern Sie Ihr Projekt wiederum in Ihrem Repository:
====<code>raphael.js</code>====
Erstellen Sie den Ordner <code>WebContent/lib</code> und legen Sie in diesen Ordner
die Datei [http://github.com/DmitryBaranovskiy/raphael/raw/master/raphael-min.js <code>raphael-min.js</code>].


# <code>Projektexplorer</code>: Rechtsklick auf <code>HelloWorldSvg=1</code> → <code>Team</code> → <code>Projekt gemeinsam nutzen</code>
Gehen Sie dabei genauso vor, wie beim Einbinden von <code>jQuery</code> im [[HTML5-Tutorium:_Canvas:_Hello_World_04#Einbinden_von_jQuery|4. Teil des Hello-World-Canvas-Tutoriums]].
# <code>SVN</code> → <code>Weiter</code>
# Url: <code> https://praktikum.multimedia.hs-augsburg.de/svn/ACCOUNT</code> ('''<code>ACCOUNT</code> durch eigenen RZ-Account ersetzen''') → <code>Weiter</code>
# Use specified folder name: <code>mmprog/tutorium/HelloWorldSVG01</code> → <code>Fertigstellen</code>


==Projekt im Repository sichern==
====<code>hello.html</code>====
Erstellen Sie im Ordner <code>WebContent</code> des Projekts die Datei <code>hello.html</code>.


Das neu angelegte Projekt wird als erstes im Repositotry gesichert:
=====Inhalt von <code>hello.html</code>=====


# Im Projektexplorer: Rechtsklick auf <code>HelloWorldSVG01</code> → <code>Team</code> → <code>Commit</code>
<source lang="html4strict">
# Comment: <code>Neues Projekt angelegt.</code>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
# <code>OK</code>
                      "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>


==Dateien erstellen==
    <!-- Titel der HTML-Seite; wird i. Allg. im Browser im Reiter angezeigt -->
    <title>HTML5-Tutorium: SVG: Hello World 01</title>


===<code>main.js</code>===
    <!-- Als HTML-Encoding sollte man stets UTF-8 verwenden. -->
Erstellen Sie im Ordner <code>WebContent/js</code> des Projektes die Datei <code>main.js</code>.
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
Diese Datei enthält nun zwei Funktionen:
 
* <code>init</code>: Diese wird nach dem Laden det HTML-Seiten in einen Browser aufgerufen, um Raphaël zu initialisieren.
    <!-- Korrektes Skalieren der Seite auf einem mobilen Endgerät -->
* <code>sayHello</code>: Diese wird aufgerufen, sobald der Benutzer seinen Namen eingegeben und den OK-Button gedrückt hat.
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">


====Inhalt von <code>main.js</code>====
    <!-- Laden von Raphael -->
    <script type="text/javascript" src="lib/raphael-min.js"></script>
   
    <!-- Schreiben von "Hallo Welt!" auf der Bühne
      (nachdem die Seite geladen wurde). -->
    <script type="text/javascript">
      function init()
      { var l_canvas = new Raphael("d_canvas", 300, 27);


<source lang="javascript">
        l_canvas
"use strict"; /* Warne vor unsauberem JavaScript-Code! */
          .text(5, 13, "Hallo Welt!")
          .attr({"font-family": "'Times New Roman', Times, serif",
                "font-size":  20,
                "font-weight": "bold",
                "text-anchor": "start",
                });
    };
    </script>


var v_canvas;
  </head>
var v_context;
  <body onload="init()">


/** Inisialisiert die Zeichenbühnen (Canvas) */
    <!-- DIV, in dem die Bühne (Raphaël paper)) zu liegen kommt -->
function init()
    <div id="d_canvas">&nbsp;</div>
{
  v_canvas  = document.getElementById("d_canvas");
  v_context = v_canvas.getContext("2d");


   v_canvas.width  = 300;
   </body>
  v_canvas.height =  27;
</html>
}
 
/**
* Löscht den aktuellen Inhalt von der Zeichenbühne
* und schreibt dann eine Begrüßung in die Zeichenbühne.
* Der Name des Benutzers wird aus einem Eingabefeld von der HTML-Seite gelesen.
*/  
function sayHello()
{
  v_context.clearRect(0, 0, v_canvas.width, v_canvas.height); // clear canvas
  v_context.font = "bold 20px 'Times New Roman', Times, serif";
  v_context.fillText("Hello, " + document.d_form.d_name.value + "!", 5, 20);
}
</source>
</source>


===<code>main.css</code>===
===Testen und Sichern des Projekts===
Erstellen Sie im Ordner <code>WebContent/css</code> des Projektes die Datei <code>main.css</code>:


====Inhalt von <code>main.css</code>====
Testen Sie zunächst Ihr Projekt und sichern Sie dann das Ergebnis.


<source lang="css">
===Funktionsweise von Raphaël===
/* Die Zeichnenbühne wird mit Hilfe eines Rands optisch hervorgehoben. */
canvas
{
  border-color: #BBBBBB;
  border-width: 2px;
  border-style: solid;
}
</source>


===<code>hello.html</code>===
Wie funktioniert Raphaël? Ganz einfach: Raphaël fügt in das <code>div</code>-Element,
Erstellen Sie im Ordner <code>WebContent</code> des Projektes die Datei <code>hello.html</code>,
das ihm als Bühne übergeben wurde, SVG-Code ein und veranlasst den Browser, die Seite
die den Benutzer nach seinem Namen fragt und diesen, nachdem der Benutzer einen OK-Button
neu zu rendern. Das Hello-Word-Beispiel funktioniert bei SVG-fähigen Browsern auch vollkommen ohne JavaScript- und Raphaël.
gedrückt hat, zur Begrüßung des Benutzers verwendet.
Man könnte den SVG-Code auch direkt in die HTML-Datei einfügen:
 
====Inhalt von <code>hello.html</code>====


<source lang="html4strict">
<source lang="html4strict">
Zeile 106: Zeile 97:
<html>
<html>
   <head>
   <head>
     <title>HTML5-Tutorium: Canvas: Hello World 02</title>
     <title>HTML5-Tutorium: SVG: Hello World 01</title>
     <meta charset="UTF-8">
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
    <link  rel="stylesheet"      href="css/main.css" />
    <script type="text/javascript" src="js/main.js"    ></script>
   </head>
   </head>
   <body onload="init()">
   <body>
 
     <div id="d_canvas">
    <!-- Die Zeichenbühne -->
       <svg
     <canvas id="d_canvas">
        xmlns="http://www.w3.org/2000/svg"
       Your browser does not support canvas!
        style="overflow: hidden; position: relative;"
    </canvas>
      >
 
        <desc>
    <!-- Das Eingabeformular zur Eingabe des Benutzernamens -->
          Created with Raphaël 2.1.0;
    <form name="d_form">
          simplified and copied into the HTML code by W. Kowarschick
      <label>Your name:</label>
        </desc>
      <input name="d_name" type="text" value=""><br/>
        <text
      <input type="button" value="OK" onmousedown="sayHello()">
          style="text-anchor: start; font: bold 20px 'Times New Roman',Times,serif;"
     </form>
          x="5" y="13"  
 
        >
          Hallo Welt!
        </text>
      </svg>
     </div>
   </body>
   </body>
</html>
</html>
</source>
</source>


==Testen und Sichern des Projektes==
Raphaël bietet allerdings zwei Vorteile:  
 
* Vektorgrafiken werden auch in Browsern angezeigt, die SVG nicht darstellen können.  
Testen Sie zunächst Ihr Projekt und sichern Sie dann das Ergebnis:
* Die Vektorgrafiken können zur Laufzeit dynamisch verändert werden. (Dies wäre allerdings auch mit Hilfe von [[CSS-Animationen]] oder direkt mit JavaScript möglich.)
 
Einen Nachteil hat Raphaël allerdings auch:
# Im Projektexplorer: Rechtsklick auf <code>HelloWorldCanvas01</code> → <code>Team</code> → <code>Commit</code>
*Man kann keine SVG-Dateien direkt in Raphaël importieren (da Raphaël eine Vektorgrafik ja nicht immer mittels SVG anzeigt). Vereinzelt findet man allerdings entsprechende Raphaël-Erweiterungen im Netz (z.B. [http://code.google.com/p/aria-math-and-science/source/browse/trunk/powersim/lib/raphael-svg-import.js?spec=svn72&r=72 raphael-svg-import.js] oder [https://github.com/sanojian/raphael-svg-import raphael-svg-import von sanojian]).
# Enter a comment for the commit operation: <code>hello.html mit main.js und main.css wurden erstellt.</code>
# <code>OK</code>
 
Anschließend sollten Sie ein wenig mit den drei Dateien experimentieren, indem Sie
sinnvolle und fehlerhafte Änderungen vornehmen. Löschen Sie z.B. die Zeilen mit dem Aufruf
der Funktion <code>clearRect</code> aus der Datei <code>main.js</code> und testen Sie Ihre
Anwendunge erneut. (Tipp: Geben Sie mehrmals hintereinander jeweils einen anderen Namen ein.)
 
Speichern Sie zu guter Letzt Ihre sinnvollen Änderungen auch im Repository (mit kurzem, aber sinnvollem Kommentar!).
 
=Optional: Apache als Test-Server=
 
Anstelle des Eclipse-eigenen Testserver kann man auch einen beliebigen
anderen Server (wie z.B. [[Apache]] oder [[Tomcat]]) zum Testen einer Web-Anwendung verwenden.
Der Vorteil dieser Variante ist, dass man den Zielserver gemäß seinen Bedürfnissen wählen und konfigurieren kann
und dass die Anwendung von Anfang an auf dem richtigen Server getestet wird.
 
Voraussetzung ist, dass ein entsprechender Server lokal installiert wurde:
* [[Installation von Apache (Windows)]], [[Installation von Apache (Mac OS X)]], [[Installation von Apache (Unix)]]
 
Der Apache-Server muss laufen, sonst funktioniert der nachfolgende Test nicht!
 
Definieren eines neuen Apache-Test-Servers in Eclipse (nachdem der Apache installiert und gestartet wurde):
 
# Projektexplorer: Rechtklick auf den Root-Ordner des aktuellen Projektes <code>HelloWorldCanvas02</code> → <code>Eigenschaften</code> → <code>Server</code> → Standardserver: <code>keine</code> → <code>OK</code>
# Im Projektverzeichnis: <code>hello.html</code> selektieren → Klick auf Icon „grüner Kreis mit weißem Dreieck“ → <code>Run on Server</code> → <code>OK</code>
#<code>Neuen Server manuell definieren</code> selektieren → Severziel eingeben: <code>HTTP Server</code> selektieren
# Hostname des Servers: <code>localhost</code>, Server name: <code>Apache</code> → <code>Weiter</code>
# Publishing Directory: <code>D:\web\apache\htdocs</code> (Webverzeichnis des Servers, abhängig davon, wohin Sie den Apache installiert haben) → <code>Weiter</code>
# evtl. Anpassungen vornehmen → <code>Fertigstellen</code>
 
Beim nächsten Aufruf von <code>Run on Server</code> wird der Server <code>Apache</code> unter der Liste der vorhandenen Server aufgeführt.
Man sollte diesen Server wählen und dann das Häckchen vor <code>Server als Projektstandardeinstellung festlegen</code> setzen,
damit man die Serverwahl nicht bei jedem Test erneu ausführen muss.


Als Browser wird der in Eclipse integrierte Browser verwendet.
===JavaScript-Code auslagern===
Besser ist es den Firefox als Standardbrowser zu verwenden:


* Klick auf <code>Fenster</code> → Klick auf <code>Web</code> → Klick auf <code>Web</code> → Klick auf <code>Firefox</code>
Lagern Sie [[HTML5-Tutorium:_Canvas:_Hello_World_01#JavaScript-Code auslagern|wie in Teil 1 des Hello-World-Canvas-Tutoriums]]
den JavaScript-Code aus der HTML-Datei <code>hallo.html</code> in die JavaScript-Datei <code>js/main.js</code> aus.


Ein Problem bleibt bestehen: Bei jedem Aufruf von <code>Run on Server</code> wird in Eclipse oder Firefox ein neues
===Testen und Sichern des Projekts===
Browserfester geöffnet. Um dies zu verhindern, kann man folgenden Trick anwenden, '''nachdem''' <code>Run on Server</code> zum ersten Mal ausgeführt worden ist:


# Im mittleren unteren Fenster den Reiter <code>Server</code> selektieren
Vergessen Sie nicht, Ihr Projekt nach dem Testen im Repository zu sichern.
# <code>Apache</code> aufklappen und selektieren
# Wenn dort nicht <code>synchronisiert</code>, sondern <code>Erneut publizieren</code> steht: Im unteren mittleren Fenster: Klick auf das vierte Icon von rechts (<code>Auf dem Server bereitstellen</code>)
# Sobald beim <code>Apache</code> wieder <code>synchronisiert</code> steht, kann im Browserfester der Reload-Button gedrückt werden, um die neuen Daten abzufrufen. (Eventuell muss der [http://de.wikipedia.org/wiki/Hilfe:Cache Browser-Cache geleert] werden.)


=Quellen=
==Quellen==
<references/>
<references/>
<ol start="2">
<ol start="2">
<li> {{Quelle|Kowarschick, W.: Multimedia-Programmierung}}</li>
<li> {{Quelle|Kowarschick, W.: Multimedia-Programmierung}}</li>
<li> [http://www.w3schools.com/html5/ w3schools.com: HTML5 Tutorial]</li>
</ol>
</ol>


=Siehe auch=
==Fortsetzung des Tutoriums==


# [http://glossar.hs-augsburg.de/beispiel/tutorium/html5_canvas/hello_world/html5_canvas_hello_world_02/WebContent/ Musterlösung]
Sie sollten nun [[HTML-Tutorium: SVG: Hello World 02|Teil 2 des Tutoriums]] bearbeiten.


<noinclude>[[Kategorie: HTML5-Tutorium: Canvas: Hello World]][[Kategorie: HTML5-Beispiel]][[Kategorie:Kapitel:Multimedia-Programmierung:Beispiele]]
<noinclude>[[Kategorie: HTML-Tutorium: SVG: Hello World]][[Kategorie: HTML-Beispiel]][[Kategorie:Kapitel:Multimedia-Programmierung:Beispiele]]
</noinclude>
</noinclude>

Aktuelle Version vom 1. März 2023, 15:16 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: hallo.html (SVN-Repository)

Voraussetzung

Sie sollten die Inhalte des Tutoriums HTML5-Tutorium: Canvas: Hello World 01 kennen.

Ziel: Ausgabe von „Hallo Welt!“ als SVG-Grafik

Die in HTML5-Tutorium: Canvas: Hello World erstellte Hello-World-Anwendung wird so umgeschrieben, dass die Ausgabe der Begrüßung nicht als Pixelgrafik sondern als Vektorgrafik ausgegeben wird. Vektorgrafiken können in modernen Browsern mittels SVG dargestellt werden.

In diesem Tutorium wird die JavaScript-Bibliothek Raphaël[1] verwendet. Diese Bibliothek stellt Vektorgrafiken mit Hilfe von SVG in Browsern dar, die dies unterstützen. In Browsern, die SVG nicht unterstützen (wie z.B. der Internet Explorer 6.0) wird automatisch ersatzweise VML verwendet. Das heißt, diese Anwendung funktioniert nicht nur in HTML5-Browsern, sondern auch in älteren HTML4-Browsern, da Raphaël nur EcmaScript 3 an Stelle von EcmaScript 5 voraussetzt.

Anwendung „HelloWorldSVG01“

Neues Projekt anlegen und speichern

Legen Sie ein neues „Statisches Web-Projekt“ mit dem Namen HelloWorldSVG01 an.

Speichern Sie dieses Projekt wie üblich in Ihrem Repository.

Dateien erstellen

raphael.js

Erstellen Sie den Ordner WebContent/lib und legen Sie in diesen Ordner die Datei raphael-min.js.

Gehen Sie dabei genauso vor, wie beim Einbinden von jQuery im 4. Teil des Hello-World-Canvas-Tutoriums.

hello.html

Erstellen Sie im Ordner WebContent des Projekts die Datei hello.html.

Inhalt von hello.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
                      "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>

    <!-- Titel der HTML-Seite; wird i. Allg. im Browser im Reiter angezeigt -->
    <title>HTML5-Tutorium: SVG: Hello World 01</title>

    <!-- Als HTML-Encoding sollte man stets UTF-8 verwenden. -->
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <!-- Korrektes Skalieren der Seite auf einem mobilen Endgerät -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">

    <!-- Laden von Raphael -->
    <script type="text/javascript" src="lib/raphael-min.js"></script>
    
    <!-- Schreiben von "Hallo Welt!" auf der Bühne 
    	  (nachdem die Seite geladen wurde). -->
    <script type="text/javascript">
      function init()
      { var l_canvas = new Raphael("d_canvas", 300, 27); 

        l_canvas
          .text(5, 13, "Hallo Welt!")
          .attr({"font-family": "'Times New Roman', Times, serif", 
                 "font-size":   20,
                 "font-weight": "bold",
                 "text-anchor": "start",
                });
     };
    </script>

  </head>
  <body onload="init()">

    <!-- DIV, in dem die Bühne (Raphaël paper)) zu liegen kommt -->
    <div id="d_canvas">&nbsp;</div>

  </body>
</html>

Testen und Sichern des Projekts

Testen Sie zunächst Ihr Projekt und sichern Sie dann das Ergebnis.

Funktionsweise von Raphaël

Wie funktioniert Raphaël? Ganz einfach: Raphaël fügt in das div-Element, das ihm als Bühne übergeben wurde, SVG-Code ein und veranlasst den Browser, die Seite neu zu rendern. Das Hello-Word-Beispiel funktioniert bei SVG-fähigen Browsern auch vollkommen ohne JavaScript- und Raphaël. Man könnte den SVG-Code auch direkt in die HTML-Datei einfügen: 

<!DOCTYPE html>
<html>
  <head>
    <title>HTML5-Tutorium: SVG: Hello World 01</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
  </head>
  <body>
    <div id="d_canvas">
      <svg 
        xmlns="http://www.w3.org/2000/svg" 
        style="overflow: hidden; position: relative;"
      >
        <desc>
          Created with Raphaël 2.1.0; 
          simplified and copied into the HTML code by W. Kowarschick
        </desc>
        <text 
          style="text-anchor: start; font: bold 20px 'Times New Roman',Times,serif;"
          x="5" y="13" 
        >
          Hallo Welt!
        </text>
      </svg>
    </div>
  </body>
</html>

Raphaël bietet allerdings zwei Vorteile:

  • Vektorgrafiken werden auch in Browsern angezeigt, die SVG nicht darstellen können.
  • Die Vektorgrafiken können zur Laufzeit dynamisch verändert werden. (Dies wäre allerdings auch mit Hilfe von CSS-Animationen oder direkt mit JavaScript möglich.)

Einen Nachteil hat Raphaël allerdings auch:

  • Man kann keine SVG-Dateien direkt in Raphaël importieren (da Raphaël eine Vektorgrafik ja nicht immer mittels SVG anzeigt). Vereinzelt findet man allerdings entsprechende Raphaël-Erweiterungen im Netz (z.B. raphael-svg-import.js oder raphael-svg-import von sanojian).

JavaScript-Code auslagern

Lagern Sie wie in Teil 1 des Hello-World-Canvas-Tutoriums den JavaScript-Code aus der HTML-Datei hallo.html in die JavaScript-Datei js/main.js aus.

Testen und Sichern des Projekts

Vergessen Sie nicht, Ihr Projekt nach dem Testen im Repository zu sichern.

Quellen

  1. ↑ Baranovskiy (2008+): Dmitry Baranovskiy; Raphaël – JavaScript Library; http://dmitrybaranovskiy.github.io/raphael/; Quellengüte: 5 (Web)
  1. Kowarschick (MMProg): Wolfgang Kowarschick; Vorlesung „Multimedia-Programmierung“; Hochschule: Hochschule Augsburg; Adresse: Augsburg; Web-Link; 2018; Quellengüte: 3 (Vorlesung)

Fortsetzung des Tutoriums

Sie sollten nun Teil 2 des Tutoriums bearbeiten.

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