HTML5 Canvas: Einsteiger Tutorial Teil 3 - Rechtecke und Kreise

Bislang haben wir uns im ersten Teil dieses Tutorials darum gekümmert, das Canvas-Element in eine Website einzubauen und haben im zweiten Teil die ersten Linien gezeichnet. Nun schauen wir uns an, wie man Rechtecke und Kreise zeichnen und mit Farbe ausfüllen kann.

Dieses Tutorial besteht aus den folgenden Teilen:

• Teil 1: Einführung und Grundlagen
• Teil 2: Linien zeichnen
• Teil 3: Rechtecke und Kreise
• Teil 4: Text auf den Canvas schreiben

Wer noch nie zuvor mit dem HTML5 Canvas gearbeitet hat, sollte zunächst den ersten Teil lesen, da alles darauf aufbaut.

Einfaches Rechteck zeichnen

Für das Zeichnen eines einfachen Rechtecks gibt es die Funktion rect(), die vier Parameter entgegennehmen kann (X und Y Koordinate, Breite und Höhe).

var canvas = document.getElementById("canv");
var context = canvas.getContext("2d");
 
context.rect(10, 10, 100, 100);   // x, y, b, h
context.strokeStyle = "#000000";  // Style für Rand 
context.stroke();                 // Rand zeichnen

Statt unseren Aufrufen von moveTo und lineTo aus dem letzten Teil dieses Tutorials, ist es hier ausreichend nur rect() zu benutzen, um den Pfad des Rechtecks anzulegen. Um diesen Pfad anschließend mit einer Linie sichtbar zu machen, rufen wir wieder stroke() auf nachdem wir die Linienfarbe mit strokeStyle definiert haben.

Dieses Beispiel zeichnet demnach die schwarze Außenlinie eines Rechtecks an der Punkt 10/10 mit einer Breite und Höhe von 100 Pixeln.

Rechteck mit Farbe füllen

Bislang haben wir ausschließlich Linien gezeichnet. Nun wollen wir uns ansehen, wie wir das Rechteck aus dem letzten Beispiel mit Farbe füllen können.

var canvas = document.getElementById("canv");
var context = canvas.getContext("2d");
 
context.rect(10, 10, 100, 100);    // x, y, b, h
context.fillStyle = "#FF0000";     // Style für Füllung   
context.fill();                    // Füllung zeichnen

Dazu ist es ausreichend statt strokeStyle und stroke() die Eigenschaft fillStyle und die Methode fill() zu verwenden.

So wie sich mit strokeStyle der Style einer Linie definieren lässt, lässt sich mit fillStyle der Style einer Füllung definieren. In unserem Beispiel setzen wir fillStyle auf #FF0000 (rot).

Zuletzt rufen wir fill() auf. Diese Funktion arbeitet wieder ähnlich wie stroke(). Nur dass sie den angegebenen Pfad (hier unser Rechteck) mit dem angegebenen fillStyle ausfüllt statt die Linie zu zeichnen.

Demnach zeichnet dieses Beispiel ein rotes Rechteck ohne Rand.

Farbiges Rechteck mit Rand zeichnen

Die Methoden stroke() und fill() lassen sich auch einfach kombinieren.

var canvas = document.getElementById("canv");
var context = canvas.getContext("2d");
 
context.rect(10, 10, 100, 100);   // x, y, b, h
context.strokeStyle = "#000000";  // Style für Rand
context.stroke();                 // Rand zeichnen
context.fillStyle = "#FF0000";    // Style für Füllung    
context.fill();                   // Füllung zeichnen

Dieses Beispiel vereint die ersten beiden Beispiele und zeichnet ein rotes Rechteck mit schwarzem Rand. Nachdem wir einen Pfad definiert haben, können wir diesen also nachzeichnen oder ausfüllen oder beides damit tun.

Rechtecke mit strokeRect und fillRect zeichnen

Für die ersten beiden Beispiele gibt es auch eine kleine Vereinfachung.

var canvas = document.getElementById("canv");
var context = canvas.getContext("2d");
 
context.strokeStyle = "#000000";      // Style für Rand
context.strokeRect(10, 10, 100, 100); // Rand von Rechteck zeichnen

context.fillStyle = "#FF0000";        // Style für Füllung
context.fillRect(10, 10, 100, 100);   // farbiges Rechteck zeichnen

Statt zuerst ein Rechteck-Pfad zu definieren und anschließend zu füllen oder mit einer Linie zu umranden, kann man auch die Funktionen strokeRect() und fillRect() benutzen, die diesen Schritt etwas abkürzen.

Kreise zeichnen

Zuletzt möchten wir uns ansehen, wie wir einen Kreis zeichnen können. Wieder ist die Vorgehensweise so, dass wir zunächst einen Pfad definieren, den wir dann anschließend farblich gestalten können.

var canvas = document.getElementById("canv");
var context = canvas.getContext("2d");
 
context.arc(100, 100, 50, 0, 2*Math.PI);  // x, y, r, start, stop
context.strokeStyle = "#000000";          // Style für Rand
context.stroke();                         // Rand zeichnen
context.fillStyle = "#FF0000";            // Style für Füllung
context.fill();                           // Füllung zeichnen

Der Pfad lässt sich mit der Funktion arc() zeichnen. Die ersten beiden Parameter sind die X- und Y-Koordinate, der dritte Parameter der Radius und die letzten beiden Parameter Beginn und Ende des Kreises. Mit 0 und 2*Math.PI zeichnen wir entsprechend den kompletten Kreis, es lassen sich so aber auch leicht Kreisbögen zeichnen.

Die Zeilen unter arc() kennen wir bereits von unserem Rechteck. Sie sorgen dafür, dass der Kreis einen Rand und eine Farbfüllung bekommt.

Dieses Beispiel zeichnet demnach einen roten Kreis mit schwarzer Umrandung, dem Mittelpunkt 100/100 und dem Radius 50.

Nächster Schritt: Texte auf den Canvas schreiben

Nachdem wir nun Linien und Objekte gezeichnet haben, schauen wir uns im nächsten Teil des Tutorials an, wie wir einen Text auf den Canvas schreiben können.