Bei fast allen Grafiken in HTML-Seiten handelt es sich um sogenannte Rastergrafiken, die mit dem IMG-Tag in die Seite eingebunden werden. Wenn man eine Vielzahl von ähnlichen Bildern benötigt, dann möchte man die Bilder eventuell dynamisch nach Benutzerinteraktionen erzeugen und verändern. Dafür bietet sich der SVG-Standard (Scalable Vector Graphics) an, mit dem Vektorgrafiken erzeugt und dynamisch angepasst werden können. Leider wurde früher SVG kaum von Browsern unterstützt, sodass eher das verbreitetere (aber proprietäre) Format Flash eingesetzt wurde. Glücklicherweise unterstützen jetzt alle modernen Browser SVG und Nutzer müssen sich kein zusätzliches SVG-Plugin im Browser installieren.
Beispiel: Canvas-Element
HTML5 mit Canvas-Element
Mit HTML5 wurde jetzt das Canvas-Element eingeführt, das ebenfalls von allen modernen Browsern unterstützt wird. Das Canvas-Element kann man sich (wie der Name schon sagt) als Leinwand vorstellen. Ähnlich wie in einfachen Malprogrammen, wie Microsoft Paint, kann man mit JavaScript auf dieser Leinwand unterschiedlichste Punkte, Linien und Figuren zeichnen. Anders als bei SVG basiert Canvas auf einer Rastergrafik, so dass nach dem Zeichnen eines Elements nur noch die Pixel-Informationen auf der Leinwand existieren und die ursprünglichen Element-Eigenschaften verloren sind.
Vergleich von SVG und Canvas
Der folgende Vergleich zwischen SVG und Canvas hilft vielleicht, die passende Technologie für den eigenen Anwendungsfall zu finden:
| SVG | Canvas | |
|---|---|---|
| Grafiksystem | Vektorgrafik | Rastergrafik |
| Webtechniken | XML-Dateien, JavaScript und CSS | Canvas + JavaScript |
| Auflösung | hoch, da frei skalierbar | fest definierte Rastergröße |
| Manipulation bestehender Elemente | Objektgraph vorhanden | nicht möglich |
| Konversion des Bildes | nein | jpeg-, png-Format |
| Barrierefreiheit | höher, z.B. mit ARIA | gering |
Ein kleines Canvas-Beispiel
Das oben gezeigte Canvas-Beispiel enthält ein Canvas-Element, einen Button und ein leeres Bild. Beim Laden der Seite werden auf dem Canvas-Element geometrische Figuren gezeichnet. Mit der Methode canvas.toDataURL("image/png"); können wir aus dem Canvas ein Bild generieren. Wenn der Button angeklickt wird, weisen wir die Bild-URL des Canvas-Elements dem Bild-Tag zu, sodass das Bild den Inhalt des Canvas-Elements anzeigt.
<!doctype html>
<html>
<head>
<title>Blog Examples Canvas</title>
<style>
body { background: #aaa; }
canvas, img { background: #fff; }
</style>
</head>
<body>
<canvas id="myCanvas" width="200" height="200"></canvas>
<button value="Senden" onClick="copyImage()">Bild kopieren</button>
<img id="imageCanvas" width="200" height="200"></img>
<script>
function copyImage() {
var myCanvas = document.getElementById('myCanvas');
var imageUrl = myCanvas.toDataURL("image/png");
document.getElementById('imageCanvas').src = imageUrl;
}
function fillCanvas() {
var myCanvas = document.getElementById('myCanvas');
var myContext = myCanvas.getContext('2d');
// Zeichne ein oranges Rechteck bei Pixel (20,30) mit Breite 40px und Hoehe 40px
myContext.lineWidth = 10;
myContext.strokeStyle = "orange";
myContext.strokeRect(20, 30, 40, 40);
// Zeichne gefuelltes blaues durchsichtiges Rechteck bei Pixel (40,60) mit Breite 60px und Hoehe 80px
myContext.fillStyle = "rgba(0, 0, 255, 0.5)";
myContext.fillRect(40, 60, 60, 80);
// Zeichnet ein gruenes Dreieck
myContext.fillStyle = "rgb(0, 255, 0)";
myContext.beginPath();
myContext.moveTo(180, 50);
myContext.lineTo(180, 180);
myContext.lineTo(90, 125);
myContext.fill();
// Zeichnet einen roten 3/4 Kreis
myContext.strokeStyle = "red";
myContext.beginPath();
myContext.arc(60, 140, 40, 0, Math.PI*0.5, true);
myContext.stroke();
}
window.onload = function() {
fillCanvas();
}
</script>
</body>
</html>
Weiterführende Informationen: SVG, Canvas und Paper.js
Wer den Eindruck hat, dass SVG für die zu lösende Aufgabe eher die passende Technologie ist, sollte sich folgende ausführlichen Vergleiche von Microsoft und Opera anschauen:
- Microsoft: So wird’s gemacht: Auswählen zwischen SVG und Canvas
- Opera: SVG or Canvas? Сhoosing between the two
Und wenn ich eigentlich mit Vektorgrafik arbeiten will, aber trotzdem auf die Zukunft mit dem neuen HTML5 Canvas-Element setzen möchte? Dann lohnt sich ein Blick auf Paper.js und dessen beeindruckenden Beispiele.