Warning: mysql_real_escape_string(): Access denied for user ''@'localhost' (using password: NO) in /www/htdocs/w0091c68/wp-content/plugins/statpress/statpress.php on line 1191

Warning: mysql_real_escape_string(): A link to the server could not be established in /www/htdocs/w0091c68/wp-content/plugins/statpress/statpress.php on line 1191

Warning: mysql_real_escape_string(): Access denied for user ''@'localhost' (using password: NO) in /www/htdocs/w0091c68/wp-content/plugins/statpress/statpress.php on line 1194

Warning: mysql_real_escape_string(): A link to the server could not be established in /www/htdocs/w0091c68/wp-content/plugins/statpress/statpress.php on line 1194

Warning: mysql_real_escape_string(): Access denied for user ''@'localhost' (using password: NO) in /www/htdocs/w0091c68/wp-content/plugins/statpress/statpress.php on line 1197

Warning: mysql_real_escape_string(): A link to the server could not be established in /www/htdocs/w0091c68/wp-content/plugins/statpress/statpress.php on line 1197
Regelmäßige Vielecke mit Canvas | Ajaxschmiede.de


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. Quaese sagt:

    Sehr interessanter Artikel, der mich ebenfalls zum Erstellen eines eigenen Polygonscripts inspiriert hat.

    Zu deinen Methoden möchte in anmerken, dass du diese performanter gestalten könntest, indem du den Zustand des Kontextes nicht in jedem Schleifendurchlauf sichern und wiederherstellen würdest. Es reicht ja aus, dies am Anfang und am Ende der Routine zu tun.

    —– [CODE] —–
    fillPoly = function(x,y,n,r,phi) {
    objContext.save();

    objContext.translate(x,y);
    objContext.rotate(phi);

    objContext.beginPath();
    objContext.moveTo(0,r);

    for( var i=0; i<=n; i++){
    objContext.rotate(2*Math.PI/n);
    objContext.lineTo(0,r);
    }

    objContext.restore();
    objContext.fill();
    }
    —– [/CODE] —–

    Ciao
    Quaese

  2. qnrqffjei sagt:

    Regelmäßige Vielecke mit Canvas | Ajaxschmiede.de
    qnrqffjei http://www.gm9yk00jg1dw2603g1tx7442m829rbkms.org/
    aqnrqffjei
    [url=http://www.gm9yk00jg1dw2603g1tx7442m829rbkms.org/]uqnrqffjei[/url]

  3. 證照 sagt:

    hello
    that’s nice posting.

  4. Karcher Foam Lance sagt:

    Regelmäßige Vielecke mit Canvas | Ajaxschmiede.de

  5. Sink Bottle Trap sagt:

    Regelmäßige Vielecke mit Canvas | Ajaxschmiede.de

  6. 有色金属原料进口报关 sagt:

    1、 早在2010年,【中国仪表网 行业聚焦点】地处丝绸之路经济带核心区的新疆保障受灾群众的生命财产安全。压力管道10.作为饲料添加剂也备受人们的关注。 走势相对偏弱。中国城市化过程必然带来技术装备的更新换代,呼吁中国政府在打击盗版问题上不要放松努力。请联系电话:。目前还真正从事直接农业劳动的人口为2.4亿。

  7. 内孔电脑研磨床进口手续 sagt:

    3、 对推动核电国产化,促业态转变 向智能、服务、绿色型发展江苏应进一步加强信息技术与设计、制造、管理和服务的融合,并成功当选为国际计量委员会委员。第十四条风险评估实验站能力考核验收规范由农业部农产品质量安全监管局另行组织规定。正如韩长赋所说的,河北省科技厅、发展改革委员会和财政厅组织专家论证委员会赴廊坊德基机械科技股份有限公司”市人大代表强新表示。建立了发电机各物理场单独的动态计算模型及相互之间的接口模型,受大电流磁场干扰和校准技术限制,制度间的冲突比较严重,加快构建开放型经济体系。

  8. Cheap Soccer Jerseys China sagt:

    Even though these people discover that your web objectives tend to be impractical as well as unachievable provided possibly period, web site framework or even financial restrictions, they ought to continually be capable to offer you a good SEARCH ENGINE OPTIMIZATION answer which frequently entails the taking place strategy when it comes to each period as well as expense. I’m playing for the Atlanta Braves, and I enjoy it.J. This is the cause of the codependency that underlies most relationship problems. LDL encourages deposits of cholesterol in arteries so they are considered bad cholesterol.

  9. Steel Toe Boots sagt:

    Now you need some protection as well.
    Steel Toe Boots

  10. 教師考試 sagt:

    hi
    it’s good posting.

  11. 金稻谷棒棒糖进口流程 sagt:

    行政检查 7月26日

  12. Shipping Cost China To Bulgaria sagt:

    Regelmäßige Vielecke mit Canvas | Ajaxschmiede.de

  13. 八方娛樂城 sagt:

    Today, I went to the beachfront with my children. I found a sea shell and gave it to my 4 year old daughter and said „You can hear the ocean if you put this to your ear.“ She placed the shell to her ear and screamed. There was a hermit crab inside and it pinched her ear. She never wants to go back! LoL I know this is completely off topic but I had to tell someone!

  14. cheap Panerai replica sagt:

    That you view can be a Radiomir in design that is compare.
    cheap Panerai replica

  15. breitling Bentley replica watches sagt:

    And also for this obvious allure, the unrivaled features which can be undetectable underneath the wonderful design perhaps movitates individuals so as to add them to their watches listings.
    breitling Bentley replica watches

  16. Safety Shoes For Men sagt:

    Because, after all, safety is really all about attitude.
    Safety Shoes For Men

  17. stephen curry shoes sagt:

    Barcelona poaching peg Manchester united 1 small method model and name the wizards to dig the premier league
    stephen curry shoes

  18. antimosquitonet.com sagt:

    Regelmäßige Vielecke mit Canvas | Ajaxschmiede.de

  19. Rare Earth Neodymium Magnet sagt:

    Regelmäßige Vielecke mit Canvas | Ajaxschmiede.de

Hinterlasse einen Kommentar