| 

.NET C# Java Javascript Exception

5
Ich habe unter HTML 5 etwas von einem Canvas-Element gehört. Kann mir jemand sagen, ob das jetzt schon von allen Browsern unterstützt wird und welche Funktinalität konkret dahinter steht?
05.11.2011
Niveneh 31 2
2 Antworten
3
Hi

Wie LiRos Links verdeutlichen, ist canvas ein Element, das zum dynamischen Rendern von Bitmaps dient. Die Unterstützung ist in allen aktuellen Browsern vorhanden. Der IE brauchte bis vor kurzem noch die Unterstützung eines Javascripts (exCanvas), um den Funktionsumfang zumindest teilweise zu erreichen.

Wichtig ist: Ein Canvas-Bild muss mit Javascript gezeichnet werden und ist ein reines Bitmap, eine Pixelgrafik, die von sich aus keinerlei Interaktionen bietet.

Alternativ lässt sich das svg-Element einbinden. Das rendert ebenfalls dynamisch grafische Inhalte, diese Inhalte sind Aber im DOM vertreten und damit ansprechbar und auslesbar und damit für Interaktionen nutzbar.

Welche der beiden Lösungen man sinnvoller Weise einsetzt hängt vom Anwendungsfall ab.
Zwei Beispiele:
1) Man möchte ein Fraktal zeichnen (eine Mandelbrotmenge zum Beispiel)

In diesem Fall hat man tausende einzelner Pixel zu setzen, die der Performance einer Webseite nicht gut täten, wären sie sämtlich im DOM vertreten. Außerdem will man eine solche Grafik zwar möglicherweise zeichnen, aber eine Interaktion ist wohl nicht nötig oder Praktisch.

Hier bietet sich Canvas an: Es zeichnet große Datenmengen performanter, wird nur durch ein Element im DOM repräsentiert und lässt sich zumindest rudimentär (Positionsabfrage des Mauszeigers) mit Interaktionen versehen.

2)Man möchte eine Statistik zur aktuellen Sonntagsfrage anzeigen

Hier kommen die Vorzüge von svg zum Einsatz: Die Anzahl der darzustellenden Elemente ist überschaubar, beim hovern über die Diagrammbalken bieten sich Interaktionen an (popups etc).

Canvas könnte die Grafik genauso gut erzeugen. Interaktionen wären aber nur umständlich nutzbar. Bei Diagrammen oder Graphen allgemein hat es den Nachteil, dass es nicht richtig skalierbar ist.

SVG dagegen kann beliebig gezoomt werden. Besonders Schrift verliert nicht an Schärfe und Präzision.

Da die ENtscheidung für den Einsatz in Grenzbereichen auch Glaubensfrage ist, empfiehlt sich Recherche: http://www.sitepoint.com/how-to-choose-between-canvas-and-svg/


Grüße
Huckepick
05.11.2011
huckepick 887 2 8
1
05.11.2011
LiRo 1,3k 1 9

Stelle deine Web-Frage jetzt!