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.

Vielecke und gezackte Muster mit Canvas

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

  1. child porn sagt:
    Juni 23rd, 2024 at 7:39 am
  2. child porn sagt:
    Juni 28th, 2024 at 10:36 am

    Regelmäßige Vielecke mit Canvas | Ajaxschmiede.de

    https://www.les-voyageuses.net/2017/12/astuces-conseils-economies-en-voyage/

  3. child porn sagt:
    Juni 30th, 2024 at 11:31 am
  4. spinco sagt:
    Juni 30th, 2024 at 10:56 pm
  5. child porn sagt:
    Juli 1st, 2024 at 3:53 am
  6. bursa travesti sagt:
    August 8th, 2024 at 9:43 am

    bursa travesti

    bursa travesti

  7. child porn sagt:
    August 14th, 2024 at 11:22 pm
  8. child porn sagt:
    August 23rd, 2024 at 5:26 am

    Regelmäßige Vielecke mit Canvas | Ajaxschmiede.de

    https://kattu-0403.com/ticket

  9. bursa travesti tumblr sagt:
    August 26th, 2024 at 11:39 am

    bursa travesti tumblr

    bursa travesti tumblr

  10. child porn sagt:
    August 30th, 2024 at 6:47 am

    Regelmäßige Vielecke mit Canvas | Ajaxschmiede.de

    https://ccnstosa.com

  11. child porn sagt:
    August 31st, 2024 at 7:31 am
  12. child porn sagt:
    September 9th, 2024 at 4:08 am
  13. child porn sagt:
    September 12th, 2024 at 11:05 am

    Regelmäßige Vielecke mit Canvas | Ajaxschmiede.de

    https://eco-officegals.com/author/guest-post/

  14. child porn sagt:
    September 25th, 2024 at 6:46 am
  15. child porn sagt:
    Oktober 3rd, 2024 at 11:58 am

    Regelmäßige Vielecke mit Canvas | Ajaxschmiede.de

    https://oldpcgaming.net/entomorph-plague-of-the-darkfall/

  16. child porn sagt:
    Oktober 3rd, 2024 at 7:09 pm

    Regelmäßige Vielecke mit Canvas | Ajaxschmiede.de

    https://www.arabnews.jp/en/middle-east/article_13597/

  17. child porn sagt:
    Oktober 6th, 2024 at 10:36 am

    Regelmäßige Vielecke mit Canvas | Ajaxschmiede.de

    http://cursotendencia.com.br/contato/

  18. porn sagt:
    Oktober 12th, 2024 at 6:24 am

    Regelmäßige Vielecke mit Canvas | Ajaxschmiede.de

    http://abstractgourmet.com/2006/10/latte-art-pro-style/

  19. child porn sagt:
    Oktober 14th, 2024 at 11:46 am
  20. child porn sagt:
    Oktober 18th, 2024 at 11:42 am

    Regelmäßige Vielecke mit Canvas | Ajaxschmiede.de

    https://www.kilometermacher.at/sinewave-cycles-revolution-testbericht/

  21. child porn sagt:
    Oktober 21st, 2024 at 12:17 pm
  22. child porn sagt:
    Oktober 22nd, 2024 at 5:32 pm
  23. child porn sagt:
    November 5th, 2024 at 7:00 am
  24. child porn sagt:
    November 6th, 2024 at 9:55 am

    Regelmäßige Vielecke mit Canvas | Ajaxschmiede.de

    https://steffen-appel.de/

  25. child porn sagt:
    November 15th, 2024 at 4:13 am

    Regelmäßige Vielecke mit Canvas | Ajaxschmiede.de

    https://www.spiritualmanna.info/tag/peer-groups/

  26. child porn sagt:
    November 16th, 2024 at 4:15 pm
  27. child porn sagt:
    November 19th, 2024 at 7:38 am

    Regelmäßige Vielecke mit Canvas | Ajaxschmiede.de

    https://qrks.cc/charm/raye-love-of-your-life-official-video/

  28. child porn sagt:
    November 23rd, 2024 at 1:11 pm

    Regelmäßige Vielecke mit Canvas | Ajaxschmiede.de

    https://antiga.carevolta.org/passejat-dijous-17112016-21h00/

  29. child porn sagt:
    Dezember 5th, 2024 at 8:11 am

    Regelmäßige Vielecke mit Canvas | Ajaxschmiede.de

    http://laceyfriends.org

Hinterlasse einen Kommentar

You must be logged in to post a comment.