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. westminster dating app the world sagt:
    August 25th, 2022 at 3:18 pm
  2. gay chat 877 *** 7000 sagt:
    September 3rd, 2022 at 12:16 am

    free gay and bi mens chat https://newgaychat.com/

  3. gay curious sex chat sagt:
    September 3rd, 2022 at 3:37 am

    free gay phone chat lines https://gaychatcams.net/

  4. gay chat cams free sagt:
    September 3rd, 2022 at 7:27 am
  5. chat gay quereetaro sagt:
    September 3rd, 2022 at 4:15 pm

    chat avenue gay chat room https://gay-live-chat.net/

  6. gay chat roullette sagt:
    September 3rd, 2022 at 9:04 pm

    free gay boys chat https://chatcongays.com/

  7. free gay phone chat no trial sagt:
    September 3rd, 2022 at 11:53 pm

    gay masturbate chat https://gayphillychat.com/

  8. dubuque gay chat sagt:
    September 4th, 2022 at 4:29 am

    gay bear free webcam chat rooms https://gaychatnorules.com/

  9. gay teen chat groups sagt:
    September 4th, 2022 at 12:08 pm

    gay chat video sites https://gaymusclechatrooms.com/

  10. gay chicago webcam chat sagt:
    September 4th, 2022 at 4:17 pm

    google zoom gay chat rooms https://free-gay-sex-chat.com/

  11. chat with gay thai boys sagt:
    September 4th, 2022 at 6:42 pm

    chat cam gay random https://gayinteracialchat.com/

  12. 3physicist sagt:
    Januar 25th, 2023 at 8:52 pm

    3decorum

  13. URL sagt:
    März 21st, 2023 at 3:01 am

    … [Trackback]

    […] Informations on that Topic: ajaxschmiede.de/canvas/regelmaessige-vielecke-mit-canvas/ […]

  14. child porn sagt:
    März 25th, 2023 at 1:05 pm
  15. meritking sagt:
    März 26th, 2023 at 12:47 am

    Regelmäßige Vielecke mit Canvas | Ajaxschmiede.de

    https://urcinsouthleeds.org.uk/

  16. child porn sagt:
    März 26th, 2023 at 3:01 am

    sfwefcs

    john

  17. madridbet sagt:
    März 26th, 2023 at 5:53 am
  18. madridbet sagt:
    März 28th, 2023 at 12:11 am

    Regelmäßige Vielecke mit Canvas | Ajaxschmiede.de

    https://magnumrockmaleenhancement.net

  19. meritking sagt:
    April 10th, 2023 at 2:48 pm
  20. madridbet sagt:
    April 17th, 2023 at 12:43 pm

    Regelmäßige Vielecke mit Canvas | Ajaxschmiede.de

    https://pomifructifericiumbrud.ro/oyun-pinup-pinball-online-pulsuz-oyna/

  21. meritking sagt:
    April 22nd, 2023 at 8:58 am

    Regelmäßige Vielecke mit Canvas | Ajaxschmiede.de

    https://www.michelangelo-lavorienoleggi.it/scarpe/nike_air_max_90_premium.html

  22. grandpashabet sagt:
    April 27th, 2023 at 5:41 am

    Regelmäßige Vielecke mit Canvas | Ajaxschmiede.de

    https://mnsah.org/

  23. grandpashabet sagt:
    Juni 1st, 2023 at 3:28 am

    Regelmäßige Vielecke mit Canvas | Ajaxschmiede.de

    https://urbanmilwaukee.com/2009/06/20/review-naked-boys-singing-at-turner-hall/

  24. meritking sagt:
    Juni 16th, 2023 at 6:30 am

    Regelmäßige Vielecke mit Canvas | Ajaxschmiede.de

    https://jackson.extension.colostate.edu/2019/08/19/8-19-19-4-h-memo/

  25. grandpashabet sagt:
    Juli 2nd, 2023 at 12:20 pm

    Regelmäßige Vielecke mit Canvas | Ajaxschmiede.de

    https://hascooil.com/

  26. madridbet sagt:
    August 3rd, 2023 at 7:28 am
  27. meritking sagt:
    August 10th, 2023 at 11:59 am

    Regelmäßige Vielecke mit Canvas | Ajaxschmiede.de

    https://hondanhatrang5s.com/chi-tiet-honda-civic-1-8e-nhap-khau-gia-758-trieu/

  28. kingroyal sagt:
    August 24th, 2023 at 1:54 am

    Regelmäßige Vielecke mit Canvas | Ajaxschmiede.de

    https://www.ifsw.org/forums/users/kcwehrm/favorites/

  29. child porn sagt:
    September 14th, 2023 at 5:32 am

    Regelmäßige Vielecke mit Canvas | Ajaxschmiede.de

    https://chicagomuslimsgreenteam.org/category/blog-post/guest

  30. child porn sagt:
    September 18th, 2023 at 12:06 pm

    Regelmäßige Vielecke mit Canvas | Ajaxschmiede.de

    https://abrosia.com/jacksonville-jaguars-credit-card/

Hinterlasse einen Kommentar

You must be logged in to post a comment.