Regelmäßige Vielecke mit Canvas

Jun 03

Regelmäßige Vielecke mit Canvas

Tag: Canvas — Patrick @ 11:00 pm

In letzter Zeit habe ich mich verstärkt wieder mal mit Canvas beschäftigt. Dabei ging es mir vor allem um regelmäßige Vielecke (englisch: regular polygons).

Von Haus bietet Canvas in keiner Implementierung eine Funktion zum schnellen und einfachen Erzeugen von regelmäßigen Vielecken. Daher setzte ich mich hin und programmierte angeregt durch canvas.quaese.de zwei entsprechenende canvas-Objekterweiterungen.

Außerdem wollte ich gern gezackte Figuren wie Sterne und Sonnen mit einem Funktionsaufruf erzeugen können. Also nahm ich meinen bisherigen Code her und überarbeitete ihn.

Das Ergebnis all des Codens kann sich meines Erachtens sehen lassen. Vor allem bei Mehrfachaufrufen ergeben sich sehr schicke Muster.

Die Methoden selbst sind nach einem simplen Prinzip aufgebaut. Man gibt die Position des Vieleckmittelpunktes, die Anzahl der Ecken, den Radius (Mittelpunkt->Ecke) und Anfangswinkel (meist 0) an.

Den Quelltext der Objekterweitungen kann ich nachfolgend sehen:

canvas.drawPoly = function(x,y,n,r,phi) {
this.translate(x,y);
this.rotate(phi);
this.beginPath();
this.moveTo(0,r);

for( var i=0; i<=n; i++){
this.save();
this.rotate(2*i*Math.PI/n);
this.lineTo(0,r);
this.restore();
}
this.stroke();
this.rotate(-phi);
this.translate(-x,-y);
}

canvas.fillPoly = function(x,y,n,r,phi) {
this.translate(x,y);
this.rotate(phi);
this.beginPath();
this.moveTo(0,r);

for( var i=0; i<=n; i++){
this.save();
this.rotate(2*i*Math.PI/n);
this.lineTo(0,r);
this.restore();
}
this.fill();
this.rotate(-phi);
this.translate(-x,-y);
}

canvas.drawZickzack = function(x,y,n,r1,r2,phi) {
this.translate(x,y);
this.rotate(phi);
this.beginPath();
this.moveTo(0,r1);

for( var i=0; i<=n; i++){
this.save();
this.rotate(2*i*Math.PI/n);
this.lineTo(0,r1);
this.restore();
this.save();
this.rotate(2*i*Math.PI/n+(2*Math.PI/n)/2);
this.lineTo(0,r2);
this.restore();
}

this.stroke();
this.rotate(-phi);
this.translate(-x,-y);
}

canvas.fillZickzack = function(x,y,n,r1,r2,phi) {
this.translate(x,y);
this.rotate(phi);
this.beginPath();
this.moveTo(0,r1);

for( var i=0; i<=n; i++){
this.save();
this.rotate(2*i*Math.PI/n);
this.lineTo(0,r1);
this.restore();
this.save();
this.rotate(2*i*Math.PI/n+(2*Math.PI/n)/2);
this.lineTo(0,r2);
this.restore();
}

this.fill();
this.rotate(-phi);
this.translate(-x,-y);
}

// Anwendungsbeispiel:
canvas.fillStyle = "#009";
canvas.strokeStyle = "rgb(0,0,0)";
canvas.lineWidth = 2;
// Sechseck
canvas.drawPoly(60,60,6,40,0);

Im Grundlagenbeitrag zu Canvas kann man sich genauere Informationen zum Einbau holen. Auch ein Blick in den Quellcode meiner angefertigen Demo hilft sich dem ein oder anderen und zeigt die Möglichkeiten der Methoden auf.

Ähnliche Themen im Blog:

Comments (1)

Eine Antwort zu “Regelmäßige Vielecke mit Canvas”

Quaese sagt:
Juli 17th, 2009 at 8:16 am

Sehr interessanter Artikel, der mich ebenfalls zum Erstellen eines eigenen Polygonscripts inspiriert hat.

Zu deinen Methoden möchte in anmerken, dass du diese performanter gestalten könntest, indem du den Zustand des Kontextes nicht in jedem Schleifendurchlauf sichern und wiederherstellen würdest. Es reicht ja aus, dies am Anfang und am Ende der Routine zu tun.

—– [CODE] —–
fillPoly = function(x,y,n,r,phi) {
objContext.save();

objContext.translate(x,y);
objContext.rotate(phi);

objContext.beginPath();
objContext.moveTo(0,r);

for( var i=0; i<=n; i++){
objContext.rotate(2*Math.PI/n);
objContext.lineTo(0,r);
}

objContext.restore();
objContext.fill();
}
—– [/CODE] —–

Ciao
Quaese
buy chloroquine sagt:
April 11th, 2020 at 2:33 am

chloroquine covid19

n coronavirus china – chloroquine phosphate online – chloroquine phosphate
levitra 20 mg sagt:
April 14th, 2020 at 7:00 pm

levitra online

buy levitra 20mg online no prescription needed us licensed – levitra levitra levitra vs vs – levitra 20mg review register
cbd oil for sale amazon sagt:
April 22nd, 2020 at 3:34 am

cbd oil

cbd stands for – cbd spray – cbd tablets
viagra for sale sagt:
April 22nd, 2020 at 10:50 pm

viagra for sale

viagra 5 mg online profile – viagra and alcohol forum total posts – cialas
pure cbd oil sagt:
April 26th, 2020 at 5:57 am

hemp oil vs cbd oil

cbd oil for pain for sale – cbd in urine – cbd in vape
chloroquine phosphate 250 mg sagt:
April 26th, 2020 at 11:16 am

chloroquine sars

3 coronavirus cases in us – aralen chloroquine – coronavirus lockdown
cialis generic sagt:
April 29th, 2020 at 12:59 am

cialis vs viagra

powered by drupal cialis – cialis effect – cialis how much to take
cialis side effects sagt:
Mai 13th, 2020 at 3:25 pm

cialis generic

cialis use – cialis information yim – cialis manufacturer
cost of tadalafil generic at walgreens sagt:
Mai 21st, 2020 at 8:01 am

tadalafil 5mg

cialis from canada online pharmacy topics by – cialis and alcohol consumption sort by – cialis 10mg or 20mg interests
tadalafil online 20mg sagt:
Juni 9th, 2020 at 3:57 pm

generic tadalafil

acquisto cialis generico italia – cialis generic cheap version 3.8.7 – cialis more:for_patients

Hinterlasse einen Kommentar

You must be logged in to post a comment.

Ajaxschmiede.de