Kreise zeichnen
Nun wollen wir in unserem Canvas einen Kreis zeichnen. Für den Kreis benutzen wir die arc()-
oder arcTo()-Methode. Beide Methoden benötigen die Übergabe von fünf bzw. sechs Parametern.
Diese
unterscheiden sich jedoch zwischen arch() und arcTo(). Schauen wir uns die Parameter
einmal genauer an.
arc()
arc(x, y, radius, startAngle, endAngle, anticlockwise)
- X und Y geben die Koordinate an, die den Mittelpunkt des zu zeichnenden Kreises
darstellt.
- radius gibt den Radius des Kreises an.
- startAngle ist der Winkel, ab wo der Kreis angefangen wird zu zeichnen.
- endAngle ist dann folglich der Winkel, wo der Zeichnung aufhört.
- anticlockwise erwartet einen booleschen Wert und bestimmt, ob die Zeichnung gegen den
Uhrzeigersinn ausgeführt wird oder nicht.
arcTo()
... dient dazu beim zeichnen einer Linie einen Bogen zu zeichnen. Es werden also zwei
Punkte(x1/y1 und x2/y2) mit einer Kreislinie verbunden.
arcTo(x1, y1, x2, y2, radius)
- X1 und Y1 geben die Koordinate an, an welchem der zu zeichnenden Kreis beginnt.
- X2 und Y2 geben die Koordinate an, an welchem der zu zeichnenden Kreis endet.
- radius gibt den Radius des Kreises an.
Die Kreiszeichnung muss wieder mit einem .stroke() oder .fill() abschlossen werden.
Damit wird die beschrieben Kreisform geplottet bzw. ausgefüllt.
Das folgende Beispiel ist aus dem Mozilla
Developer Network entnommen. Zu Demonstrationszwecken ist der folgende original Code etwas
abgewandelt.
var canvas = document.getElementById('canvas');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
for(var i=0;i<4;i++){
for(var j=0;j<3;j++){
ctx.beginPath();
var x = 25+j*50; // x coordinate
var y = 25+i*50; // y coordinate
var radius = 20; // Arc radius
var startAngle = 0; // Starting point on circle
var endAngle = Math.PI+(Math.PI*j)/2; // End point on circle
var anticlockwise = i%2==0 ? false : true; // clockwise or anticlockwise
ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);
if (i>1){
ctx.fill();
} else {
ctx.stroke();}}}}
Der Code resultiert in folgende Kreisbeispiele:
Gradients
Wie bei vielen Zeichenprogrammen haben wir auch bei Canvas die Möglichkeit einen Gradientenverlauf zu
erstellen. Dazu gibt es zwei verschiedene Methoden, jeweils um einen linearen oder einen
kreisförmigen Gradienten zu erzeugen. Diese nehmen vier bzw. sechs Parameter entgegen. Diese beiden
Methoden geben ein Gradientenobjekt zurück, welches wir dann den "FillStyle"-Methoden als "Farbe"
zuweisen können.
var lineargradient = ctx.createLinearGradient(x1, y1, x2, y2)
var radialgradient = ctx.createRadialGradient(x1, y1, r1, x2, y2, r2)
Der lineare Gradient ist relativ simpel. Er nimmt zwei Koordinaten entgegen und erzeugt einen
Gradient von X1/Y1 nach X2/Y2.
Beim radialen Gradienten verhält sich die Erzeugung geringfügig komplexer. X1/Y1/R1
stellen den
ersten Kreis mit Mittelpunkt X1/Y1 und Radius R1 dar. Der zweite Kreis wird analog mit
X2/Y2/R2
beschrieben. Der Gradient verläuft zwischen diesen Kreisen.
Nachdem die Gradientenobjekte erzeugt wurden, müssen diese noch verschiedene Farbabstufungen
zugewiesen werden. Das geschieht mit der folgenden Methode, die vom Gradientenobjekt zur Verfügung
gestellt wird.
lineargradient.addColorStop(0.5, '#000');
lineargradient.addColorStop(1, 'rgba(0,0,0,0)');
addColorStop() bekommt einen Parameter zwischen 0 und 1 übergeben, welcher die relative
Position des Gradienten beschreibt. Zusätzlich benötigt die Methode eine CSS-konforme Farbangabe.
Der Beispielcode zeigt einen einfachen Gradient von weiß nach schwarz.
Nun folgt ein komplexeres Beispiel zu mehrfach farbigen Kreisgradienten. Das Beispiel ist dem Mozilla
Developer Network entnommen. Es demonstriert sehr schön, wie mit wenigen Zeilen Code ein
durchaus beeindruckendes Bild mit mathematisch präzisen Farbverläufen erstellt werden kann.
Das folgende Code-Snippet ist für dieses bunte Gradientenbild verantwortlich.
var ctx = document.getElementById('anyCanvas').getContext('2d');
// Create gradients
var radgrad = ctx.createRadialGradient(45,45,10,52,50,30);
radgrad.addColorStop(0, '#A7D30C');
radgrad.addColorStop(0.9, '#019F62');
radgrad.addColorStop(1, 'rgba(1,159,98,0)');
var radgrad2 = ctx.createRadialGradient(105,105,20,112,120,50);
radgrad2.addColorStop(0, '#FF5F98');
radgrad2.addColorStop(0.75, '#FF0188');
radgrad2.addColorStop(1, 'rgba(255,1,136,0)');
var radgrad3 = ctx.createRadialGradient(95,15,15,102,20,40);
radgrad3.addColorStop(0, '#00C9FF');
radgrad3.addColorStop(0.8, '#00B5E2');
radgrad3.addColorStop(1, 'rgba(0,201,255,0)');
var radgrad4 = ctx.createRadialGradient(0,150,50,0,140,90);
radgrad4.addColorStop(0, '#F4F201');
radgrad4.addColorStop(0.8, '#E4C700');
radgrad4.addColorStop(1, 'rgba(228,199,0,0)');
// draw shapes
ctx.fillStyle = radgrad4;
ctx.fillRect(0,0,150,150);
ctx.fillStyle = radgrad3;
ctx.fillRect(0,0,150,150);
ctx.fillStyle = radgrad2;
ctx.fillRect(0,0,150,150);
ctx.fillStyle = radgrad;
ctx.fillRect(0,0,150,150);