JavaScript-Techniken bei HTML5 und mehr - JavaScript: Die Universelle Sprache zur Web-Programmierung - page 444

if (i < 300)
setTimeout("zeichnen()", "2");
}
function init() {
zeichnenbereich = document.getElementById('cv1').getContext('2d');
zeichnen();
}
window.onload = init;
In der Funktion zeichnen() zeichnen wir in dem Beispiel ein Rechteck. Vorher wurde der
entsprechende Bereich geleert. Die Breite und Höhe des Rechtecks ergeben sich über die
Variablen i und j , die in der Funktion zeichnen iteriert werden. Wichtig ist der verzögerte
Selbstaufruf der Funktion zeichnen() . Dieser erfolgt so lange, bis i den Grenzwert 300
erreicht. Das ist alles.
14.5.2■umgang mit Scalable Vector Graphics - SVG
Bei den wichtigsten Neuerungen von HTML5 wird sehr ot die Erweiterung der nativen multi-
medialen Möglichkeiten eines Browsers genannt. Dies umfasst neben der Einbettung von
Video- und Sounddateien vor allen Dingen die Erweiterungen der Möglichkeiten zum Zeichnen
von Objekten. Dabei kann man die neuen nativen Möglichkeiten zum Zeichnen über die eben
behandelten Canvas -Objekte und die Einbindung von SVG (Scalable Vector Graphics - skalier-
bare Vektorgraiken ) als Kernkonzepte sehen, wobei SVG schon lange vor HTML5 verfügbar
war und Sie sehr viele Ähnlichkeiten in beiden Konzepten bei der konkreten Anwendung
sehen. Aber es gibt eben auch gravierende Unterschiede in der technischen Grundebene.
14.5.2.1■Grundlagen zu SVG
Bei SVG handelt es sich um die vom W3C schon recht lange empfohlene XML-Speziikation
zur Beschreibung zweidimensionaler Vektorgraiken. Das beginnt bei einfachen graischen
Formen wie Kreise oder Rechtecke und führt hin zu komplexeren Strukturen wie etwa Dia-
gramme zur Darstellung von Messwerten, aber auch die Beschreibung von abgerundeten
Schaltlächen oder sonstigen per Formel zu beschreibenden Graikobjekten. SVG gibt es seit
2001 und derzeit ist die Version 1.2 aktuell, die seit 2008 oiziell verfügbar ist 12 . Auch Ani-
mationen werden von SVG unterstützt (mittels einer anderen XML-Speziikation namens
SMIL - Synchronized Multimedia Integration Language). Ebenso kann das SVG-DOM nach
der oiziellen Speziikation mit Hilfe eingebetteter Funktionen über ECMAScript und ähn-
liche Sprachen manipuliert werden. Auch so kann man Animationen programmieren. Bis-
her wird SVG jedoch noch nicht von allen Browsern unterstützt beziehungsweise es benö-
tigt ein Plugin (etwa beim Internet Explorer bis Version 8). So gesehen ist die Unterstützung
für SVG sowieso schon länger vorhanden, aber eben über ein Plugin.
14.5.2.2■Das Datenformat
Da SVG ein XML-basiertes Dateiformat ist, sind Inhalte von SVG-Dateien leicht zugänglich.
Sie können prinzipiell auch direkt mit einem Texteditor bearbeitet werden. Die empfohlene
Dateiendung von SVG-Dateien ist .svg und der MIME-Typ ist image/svg+xml .
12 Um eine gewisse Abwärtskompatibilität zu gewährleisten, verwendet man aber auch heute noch ot SVG 1.1.