Juni 03

Regelmäßige Vielecke mit Canvas

Tag: Canvas — Patrick @ 11:00 p.m.

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:
    August 5th, 2025 at 3:59 p.m.

    Regelmäßige Vielecke mit Canvas | Ajaxschmiede.de

    https://www.rockmusicraider.com/kampfar-ofidians-manifest-review/

  2. otclevitra.com sagt:
    August 5th, 2025 at 9:16 p.m.

    otclevitra.com

    otclevitra.com

  3. ummalife.com/post/519826 sagt:
    August 7th, 2025 at 1:16 p.m.

    ummalife.com/post/519826

    ummalife.com/post/519826

  4. www.stateofartacademy.com/groups/cenforce/members/all-members/ sagt:
    August 10th, 2025 at 7:17 p.m.
  5. child porn sagt:
    August 14th, 2025 at 5:24 a.m.

    Regelmäßige Vielecke mit Canvas | Ajaxschmiede.de

    https://framethestage.com/2021/01/unrivaled-release-new-single-doppelganger/

  6. child porn sagt:
    August 16th, 2025 at 1:45 a.m.

    Regelmäßige Vielecke mit Canvas | Ajaxschmiede.de

    http://www.ispm.ac.ma/

  7. child porn sagt:
    August 22nd, 2025 at 3:02 a.m.

    Regelmäßige Vielecke mit Canvas | Ajaxschmiede.de

    http://www.rem-beton.ru/shop/mapei-mapegum-wps-5/

  8. child porn sagt:
    August 23rd, 2025 at 5:45 a.m.

    Regelmäßige Vielecke mit Canvas | Ajaxschmiede.de

    https://pescaenvalencia.com/tienda/carrete-shimano-bulls-eye-9120/

  9. child porn sagt:
    September 2nd, 2025 at 5:46 a.m.
  10. child porn sagt:
    September 2nd, 2025 at 11:43 p.m.

    Regelmäßige Vielecke mit Canvas | Ajaxschmiede.de

    http://www.circlebusdoor.com/

  11. https://community.plus.net/t5/user/viewprofilepage/user-id/132728 sagt:
    September 6th, 2025 at 12:38 a.m.
  12. https://in.pinterest.com/fildena50/ sagt:
    September 8th, 2025 at 6:04 p.m.
  13. Child porn sagt:
    September 10th, 2025 at 2:08 a.m.

    Regelmäßige Vielecke mit Canvas | Ajaxschmiede.de

    https://www.mareadebuenagente.org

  14. https://cipillsvi.com/ sagt:
    September 10th, 2025 at 6:51 a.m.
  15. https://bento.me/duricef sagt:
    September 12th, 2025 at 3:53 a.m.
  16. child porn sagt:
    September 13th, 2025 at 6:45 a.m.

    Regelmäßige Vielecke mit Canvas | Ajaxschmiede.de

    http://www.tiphainemarie.com/2016/12/holiday-season-zalando/

  17. child porn sagt:
    September 17th, 2025 at 1:00 a.m.

    Regelmäßige Vielecke mit Canvas | Ajaxschmiede.de

    http://www.kinvaraccc.ie/blog/montessori-indoor-garden/

  18. https://www.arc.agric.za/arc-ppri/FAWarned/Lists/DiscussionForum/Nolvadex sagt:
    September 17th, 2025 at 2:21 p.m.
  19. https://cathopic.com/@iverhope sagt:
    September 19th, 2025 at 5:31 a.m.
  20. malegra 50 sagt:
    September 27th, 2025 at 9:04 p.m.

    malegra fxt 140mg

    malegra oral jelly 100mg

  21. kamagra gold sagt:
    Oktober 1st, 2025 at 10:31 a.m.

    buy super kamagra tablets

    kamagra oral jelly in australia

  22. child porn sagt:
    Oktober 3rd, 2025 at 5:01 a.m.

    Regelmäßige Vielecke mit Canvas | Ajaxschmiede.de

    https://www.thaifoodrecipesite.com/

  23. covimectin sagt:
    Oktober 19th, 2025 at 8:00 a.m.

    ivrea

    vermact plus 12

Hinterlasse einen Kommentar

You must be logged in to post a comment.