Jun 03
Regelmäßige Vielecke mit Canvas
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:
August 25th, 2022 at 3:18 pm
zoosk dating login https://onlinedatingservicesecrets.com/
September 3rd, 2022 at 12:16 am
free gay and bi mens chat https://newgaychat.com/
September 3rd, 2022 at 3:37 am
free gay phone chat lines https://gaychatcams.net/
September 3rd, 2022 at 7:27 am
gay free chat https://gaychatspots.com/
September 3rd, 2022 at 4:15 pm
chat avenue gay chat room https://gay-live-chat.net/
September 3rd, 2022 at 9:04 pm
free gay boys chat https://chatcongays.com/
September 3rd, 2022 at 11:53 pm
gay masturbate chat https://gayphillychat.com/
September 4th, 2022 at 4:29 am
gay bear free webcam chat rooms https://gaychatnorules.com/
September 4th, 2022 at 12:08 pm
gay chat video sites https://gaymusclechatrooms.com/
September 4th, 2022 at 4:17 pm
google zoom gay chat rooms https://free-gay-sex-chat.com/
September 4th, 2022 at 6:42 pm
chat cam gay random https://gayinteracialchat.com/
Januar 25th, 2023 at 8:52 pm
3decorum
März 21st, 2023 at 3:01 am
… [Trackback]
[…] Informations on that Topic: ajaxschmiede.de/canvas/regelmaessige-vielecke-mit-canvas/ […]