Wie man ein Canvas Element erstellt
Mit HTML5 Canvas bekommen wir Entwickler eine Alternative zu Flash. Zwar erst nur auf neuen Browsern, aber es lohnt sich diese Technik schon jetzt zu betrachten.
Canvas HTML5 Beispiel
Canvas ist ein zusätzliches Tag, welches man in HTML5-fähigen Browsern eingeführt hat. Das Canvas Tag erstellt man am besten so:
Download Code!
<canvas id="canvas" height="120" width="120">Ich bin ein Canvas-Element, falls Sie das hier sehen unterstützt ihr Browser kein HTML 5.0.</canvas>
Schön ist, das Browser welche kein HTML 5.0 unterstützen, den Text im Canvas angezeigt bekommen.
Um mit dem Element etwas zeichnen zu können, bedient man sich der getContext() Methode.
Download Code!
var c = document.getElementById("canvas");
// Kann Browsr HTML5?
if(c.getContext) {
var con = c.getContext("2d");
con.fillStyle = "#ff0000";
con.fillRect(10, 10, 100, 100);
}
Achtung: Was mir aufgefallen ist, das Canvas-Zeichnen funktioniert nur richtig, wenn man dem Canvas im HTML-Tag eine Höhe und eine Breite gibt. Wenn ich das über CSS mache, bekomme ich ein anderes Ergebnis.
