Information Technology Reference
In-Depth Information
Abbildung 5.1:
Zwei überlappende Rechtecke
TIPP
Alle Abbildungen im Canvas-Kapitel sind selbst als HTML-Seiten mit Canvas
gestaltet und im Internet sowohl unter der im URL-Feld des Screenshots ange-
zeigten Adresse als auch über die Indexseite unter
http://html5.komplett.cc/code/
chap_canvas/
verfügbar. Ein Blick in den jeweiligen Quellcode lohnt sich!
Bevor wir auf die Leinwand zeichnen können, benötigen wir eine Referenz zu
derselben. Die erste Zeile im Skript tut genau dies und speichert in der Variablen
canvas
mithilfe der
W3C CSS Selectors API
-Methode
document.querySelector()
eine Referenz auf das erste gefundene
canvas
-Element im Dokument:
var canvas = document.querySelector("canvas");
Neben den Attributen
canvas.width
und
canvas.height
besitzt dieses, auch
HTMLCanvasElement
genannte Objekt die Methode
getContext()
. Sie erlaubt uns,
auf das Herzstück von Canvas zuzugreifen, den
CanvasRenderingContext2D
,
indem wir
2d
als Kontext-Parameter übergeben:
var context = canvas.getContext('2d');
Damit ist der
Zeichenkontext
definiert, und wir können mit dem Zeichnen der
beiden Rechtecke beginnen. Ohne auf Details des Attributs
fillStyle
oder der
Methode
fillRect()
einzugehen, bietet sich zweimal derselbe Ablauf: Füllung
definieren und dann das Rechteck hinzufügen:
