Jun 03

Regelmäßige Vielecke mit Canvas

Tag: CanvasPatrick @ 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.

Vielecke und gezackte Muster mit Canvas

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

  1. clindamycin cats sagt:

    clindamycin cats

    clindamycin cats

  2. zithromax antibiotic sagt:

    zithromax antibiotic

    zithromax antibiotic

  3. ciprofloxacin gastritis sagt:

    ciprofloxacin gastritis

    ciprofloxacin gastritis

  4. celecoxib with excedrin sagt:

    celecoxib with excedrin

    celecoxib with excedrin

  5. 3diagonal sagt:

    1slavish

  6. sildenafil sagt:

    sildenafil

    sildenafil

  7. viagra sagt:

    viagra

    viagra

  8. sildenafil citrate sagt:

    sildenafil citrate

    sildenafil citrate

  9. revatio sagt:

    revatio

    revatio

  10. jacks entertainment online casino sagt:

    admiral online casino https://download-casino-slots.com/

  11. online casino live sagt:

    fastest payout online casino usa https://firstonlinecasino.org/

  12. party casino online sagt:

    online casino no deposit bonus 2021 https://onlinecasinofortunes.com/

  13. top online casino reviews sagt:

    online casino virginia https://newlasvegascasinos.com/

  14. choctaw casino online sagt:

    nj online casino no deposit bonus https://trust-online-casino.com/

  15. online casino testen sagt:

    best online casino sites https://onlinecasinosdirectory.org/

  16. online live casino sagt:

    diamond reels online casino https://9lineslotscasino.com/

  17. play free casino games online sagt:

    caesars online casino nj https://free-online-casinos.net/

  18. online casino free bonus sagt:

    lucky 7 casino online https://internet-casinos-online.net/

  19. casino online usa real money sagt:

    michigan online casino free play https://cybertimeonlinecasino.com/

  20. 10 dollar minimum deposit usa online casino sagt:

    wind creek casino online games homepage https://1freeslotscasino.com/

  21. real money online casino usa sagt:

    atlantic city online casino https://vrgamescasino.com/

  22. thunder valley online casino sagt:

    online casino ny real money no deposit https://casino-online-roulette.com/

  23. sicheres online casino sagt:

    online casino real money free play https://casino-online-jackpot.com/

  24. online casino pennsylvania sagt:

    virgin casino online nj https://onlineplayerscasino.com/

  25. motor city online casino sagt:

    el royale online casino review https://ownonlinecasino.com/

  26. nj casino online sagt:
  27. best online casino usa real money sagt:

    online casino big winners https://casino8online.com/

  28. best rated vpn 2018 sagt:
  29. best free vpn download sagt:

    avast secure line vpn https://shiva-vpn.com/

  30. vpn free for pc sagt:

    vpn for windows free download https://freehostingvpn.com/

  31. gaming vpn free sagt:

    tunnelbear free vpn https://ippowervpn.net/

  32. what is the best vpn? sagt:

    fastest vpn service https://imfreevpn.net/

  33. best free unlimited vpn sagt:

    best chrome vpn free https://superfreevpn.net/

  34. best vpn for streaming reddit sagt:

    best free vpn cnet https://free-vpn-proxy.com/

  35. express vpn sagt:

Hinterlasse einen Kommentar

You must be logged in to post a comment.