Information Technology Reference
In-Depth Information
context.fillStyle = 'red';
context.fillRect(0,0,800,600);
context.fillStyle = 'rgba(255,255,0,0.5)';
context.fillRect(400,200,800,600);
Die derzeitige Canvas-Spezifikation definiert nur einen 2D-Kontext (siehe die
HTML Canvas 2D Context-
Spezifikation unter
http://www.w3.org/TR/2dcontext/
),
schließt aber nicht aus, dass weitere, wie zum Beispiel
3D
, zu einem späteren
Zeitpunkt folgen könnten. Erste Initiativen in diese Richtung laufen bereits bei
der Khronos-Gruppe, die in Zusammenarbeit mit Mozilla, Google und Opera an
einer JavaScript-Bindung namens WebGL für OpenGL ES 2.0 arbeitet (
http://
www.khronos.org/webgl/
). Erste Implementierungen dieses jungen Standards
finden sich bereits in Firefox, WebKit und Chrome.
Wenden wir uns aber wieder dem 2D-Kontext zu, denn die Möglichkeiten, die
sich hinter dem
CanvasRenderingContext2D
-Interface verstecken, sind mannig-
faltig und durchaus geeignet, um anspruchsvolle Applikationen zu realisieren.
Abbildung 5.2 zeigt ein einfaches Säulendiagramm, das uns bei der Erklärung
der ersten drei Features des Zeichenkontextes begleiten wird: Rechtecke, Far-
ben und Schatten.
Abbildung 5.2:
Balkendiagramm mit zehn horizontalen Balken
