jQuery und das Canvas-Element

Simon says
Kommentare

Zeichnen im Canvas

Unser Spiel besteht aus einer runden Hintergrundfläche und vier Tasten, die kreisförmig darauf angeordnet werden. Da wir uns das Neuzeichnen dieser Tasten im Spielverlauf ersparen

Zeichnen im Canvas

Unser Spiel besteht aus einer runden Hintergrundfläche und vier Tasten, die kreisförmig darauf angeordnet werden. Da wir uns das Neuzeichnen dieser Tasten im Spielverlauf ersparen wollen (wir erledigen das Animieren später lieber komfortabel mit jQuery), verwenden wir für jedes Einzelteil einen eigenen Canvas, den wir per CSS positionieren können. Als Erstes zeichnen wir die runde Hintergrundfläche:

var $bg = $('').appendTo($simon);
var canvas = $bg.get(0);
var context = canvas.getContext('2d');
context.fillStyle = '#333';
context.arc(230,230,230,0,Math.PI*2,true);
context.fill();

Nicht allen ist vielleicht bekannt, dass mit dem einfachen $ ()-Aufruf nicht nur bestehende Elemente im DOM (Document Object Model) ausgewählt, sondern auch neue erstellt werden können. Wir übergeben dazu anstelle eines Selektors einfach ein komplettes HTML-Element, das wir in der Folge noch per appendTo irgendwo im DOM ablegen müssen.

jQuery selbst bietet wie gesagt keine Wrapper-Methoden für die Canvas-API; um in unserem neu erstellten Canvas nun zeichnen zu können, müssen wir uns von jQuery das DOM-Element selbst holen (also jene Umwandlung, die durch den Aufruf von $ () geschieht, rückgängig machen), wofür die Methode get() zur Verfügung steht. Übergeben wird der Index des DOM-Elements, da ein jQuery-Objekt ja mehrere Elemente enthalten kann. Nun haben wir zwar unseren Canvas – zeichnen können wir darin jedoch immer noch nicht. Zuerst müssen wir uns noch ein Kontextobjekt abholen, in den meisten Fällen ist dies der 2d-Kontext (für zweidimensionales Zeichnen). Es gibt übrigens auch einen 3d-Kontext, dieser ist jedoch (noch) nicht standardisiert und wird von verschiedenen Browserherstellern unterschiedlich, wenn überhaupt, implementiert. Erst dieses Kontextobjekt bietet uns nun die Eigenschaften und Methoden, um darauf los zu pinseln: Für den Hintergrund legen wir erst mit fillStyle eine Füllfarbe fest, zeichnen dann mit der arc()-Methode einen Kreis, und füllen diesen schließlich per fill().

Der gesamte Zeichenvorgang läuft durch ein sequenzielles Setzen von Eigenschaften sowie Aufrufen von Methoden des Kontextobjekts ab. Wie bereits im Vergleich mit SVG erwähnt, können wir nach Ablauf der Zeichenoperationen auf keine einzelnen Bestandteile der Grafik zugreifen, alles wird in ein Bitmap gerendert. Ebenso sind keine einzelnen „Ebenen“ verfügbar; analog zum Zeichnen auf Papier liegen nachfolgende Formen über den vorhergehenden (dieses Verhalten kann allerdings über das so genannte Compositing gesteuert werden [1]). In unserem Beispiel verwenden wir einfach mehrere Canvas-Elemente für den Hintergrund und die Tasten, um diese getrennt positionieren und später animieren zu können. Wer bereits mit der Drawing API in ActionScript zu tun hatte, wird hier eine starke Ähnlichkeit entdecken, einige Methoden sind dort sogar identisch benannt. Allerdings stehen in ActionScript etwas mehr Komfortmethoden wie drawCircle() oder drawEllipse() zur Verfügung, während im Canvas die einzige direkt erzeugbare Grundform ein Rechteck ist und alles weitere durch Kombination anderer Basismethoden und deren Kombination gezeichnet wird.

Bleistift und Tusche – die Zeichenmethoden

Mark Pilgrim unterteilt in seiner sehr guten HTML5-Einführung „Dive into HTML5“ [2] einige der verfügbaren Methoden bildlich in so genannte Bleistift- und Tuschemethoden. Wird beispielsweise über die simple Bleistiftmethode lineTo() ein Pfad gezeichnet, so ist dieser zunächst nicht sichtbar, bis er mit der zugehörigen Tuschemethode stroke() nachgezeichnet wurde. Die wichtigsten Bleistiftmethoden sehen wir in Tabelle 1 aufgelistet.

Tabelle 1: Die so genannte Bleistiftmethoden

beginPath() Startet einen neuen Pfad (bildlich gesprochen „den Bleistift in die Hand nehmen“). Muss nur explizit aufgerufen werden, wenn der neue Pfad auch mit einer neuen Kontur oder Füllung versehen werden soll.
moveTo(float x,float y) Bewegt den „Bleistift“ zu den angegebenen Koordinaten x, y. Achtung: Die erste Anweisung nach einem beginPath()-Aufruf (oder in einem leeren Canvas) wird stets als moveTo() interpretiert, dies sollte also stets explizit aufgerufen werden!
lineTo(float x, float y) Zeichnet eine Linie vom aktuellen Punkt zu x, y.
quadraticCurveTo(float cpx, float cpy, float x, float y) Zeichnet eine quadratische Beziérkurve vom aktuellen Punkt zu x, y, deren Kontrollpunkt auf cpx, cpy liegt.
bezierCurveTo(float cpx1, float cpy1, float cpx2, float cpy2, float x, float y) Zeichnet eine kubische Bézierkurve (mit zwei Kontrollpunkten).
arc(float x, float y, float radius, float startAngle, float endAngle, boolean anticlockwise) Zeichnet einen Kreisbogen mit dem Mittelpunkt x, y und einem Radius ‚radius‘. Über ’startAngle‘ und ‚endAngle‘ werden Start- und Endpunkt des Bogens in der Einheit Radiant festgelegt.
closePath() Zeichnet eine Linie vom aktuellen Punkt zum Startpunkt des aktuellen Pfades. Ohne Auswirkungen, wenn der Pfad bereits geschlossen wurde oder lediglich einen Punkt enthält.Diese Methode wird automatisch aufgerufen, wenn der aktuelle Pfad mit fill() gefüllt oder mit openPath() ein neuer Pfad begonnen wird.

Grundlegende Tuschemethoden und dazugehörige Eigenschaften sehen wir in Tabelle 2.

Tabelle 2: Die Tuschemethoden

strokeStyle

fillStyle

Diese beiden Eigenschaften definieren die „Tusche“, wobei nicht nur Farbangaben erlaubt sind (die wie in CSS als ‚red‘ oder ‚#ff0000‘ geschrieben werden können), sondern auch Muster (Bilder) und Verläufe (wir bleiben in diesem Artikel aber bei den Grundlagen und verzichten erst einmal hierauf).
stroke() Zeichnet die Kontur des aktuellen Pfades mit dem definierten strokeStyle.
fill() Füllt den aktuellen Pfad mit dem definierten fillStyle.

Die arc()-Methode, die wir für die Hintergrundfläche verwendet haben, bedarf vielleicht noch ein wenig der Erläuterung. Wie bereits erwähnt, gibt es für das Zeichnen anderer Grundformen als des Rechtecks keine eigenen Methoden, wir zeichnen den Kreis also mit der arc()-Methode für Kreissegmente. Die Angabe von Mittelpunkt und Radius ist verständlich, doch wie funktioniert das mit den Winkeln?

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -