Dokumentation (canvas.quaese.de)
 

Allgemeines - <canvas>-Element

<canvas> wird wie andere HTML-Elemente verwendet. Es besitzt die beiden Attribute width und height. Werden diese nicht gesetzt, erhält es die Initialwerte 300 Pixel Breite und 150 Pixel Höhe. Neben der Dimensionierung über Attribute, können Grössen auch über die entsprechenden CSS-Eigenschaften gesetzt werden.

Weiterhin werden die Universalattribute (class, id, style und title) unterstürzt. Das Attribut id wird in erster Linie verwendet, um das Element im DOM refernzieren zu können.

Ausführlichere Informationen zu den Methoden und Eigenschaften finden sich hier.

Die Zeichenfläche (Gitter)

Standardmäßig entspricht eine Einheit des Gitters einem Pixel im canvas. Der Ursprung der Zeichenfläche ist an der linken oberen Ecke - die Koordinaten an dieser Position sind (0, 0). Je weiter rechts vom Ursprung sich ein x-Wert befindet, umso höher ist sein Wert. Je weiter unterhalb vom Ursprung sich ein y-Wert befindet, desto höher ist sein Wert.

Zeichenflaeche

Einbinden ins Dokument

<canvas width="150" height="150" id="canvas_id">Ihr Browser unterstützt das <canvas>-Element nicht<canvas>

Mit Hilfe von CSS-Eigenschaften kann das Erscheinungsbild an individuelle Bedürfnisse angepasst werden - z.B. Rahmen oder Hintergrund.

Um auch ältere Browser bedienen zu können, die das <canvas>-Element nicht unterstützen, sollte erklärender Inhalt eingefügt werden. Dieser wird nur angezeigt, wenn das Element nicht angezeigt werden kann, moderne Browser ignorieren diesen Inhalt.

Einbinden im Script

Es existiert auch die Möglichkeit, ein canvas-Element mittels eines Scriptes zu erstellen und ins Dokument zu integrieren.

// canvas-Objekt erstellen
var objCanvas = document.createElement("canvas");
// Falls das Objekt unterstützt wird
if(objCanvas.getContext){
  // Zeichenroutinen
  document.getElementsByTagName("body")[0].appendChild(objCanvas);
}else{
  // Sonstiger Code
}
 
Dokument zuletzt modifiziert: 21.09.2008, 18:39 Uhr
<canvas>-Dokumentation Ver. 0.1 | Quaese, Jan 2008 | Datenschutz | Sitemap