以编程方式使用HTML5画布绘制此图案

如何使用HTML5画布以编程方式绘制以下图案？以编程方式使用HTML5画布绘制此图案

我有逻辑画圆圈here。此外，我可以画出圆弧看到这个bin然而，我正在努力将所有的数学一起进入下面的模式。

据7个弧，每个含有不同量的圆（外到内：33，29，26，23，21，18，15）

Im不熟悉帆布但认为它可能是解决我的问题。

2016-01-22 sidarcy

你有试过什么吗？ – magreenberg

你试过只画一行吗？ – hoomi

事实上，我有逻辑在这里绘制圆圈https://jsbin.com/degurexaxa/edit?html,js,output，我可以绘制圆弧参见：https：//jsbin.com/dikogugafu/edit？html， js，输出我更加努力地将数学融合在一起。我会更新我的问题与上述链接，我会很感激，如果你投了我的问题，你重新考虑。我只是探索Canvas作为一个选项。 – sidarcy

你可以做somethig这样的：

var c = document.getElementById("myCanvas"); 
var ctx = c.getContext("2d"); 
var radius = 200;//outer radius 
var rows = 7;//number of rows 
var diff = 20;//distance between each row 
var circle_count = [33, 29, 26, 23, 21, 18, 15]; 
for (var j = 0; j < rows; j++) { 
    //the circle count to be made 
    var count = circle_count.shift(); 

    var current_radius = radius - j*diff; 
    for (var i = 0; i < count; i++) { 
    //devide 180 degrees by the number of circle to draw 
    var angle = Math.PI/(count-1) * i*-1; 
    //x coordinate 
     var x = current_radius * Math.cos(angle) + 300; 
    //y coordinate 
    var y = current_radius * Math.sin(angle) + 100; 
    ctx.beginPath(); 
    ctx.arc(x, y, 5, 0, 2 * Math.PI); 
    ctx.stroke(); 
    } 
}

工作拨弄here

希望这有助于！

来源

2016-01-22 08:41:28 Cyril

扭转我的图表，以防您寻找... – Cyril

这是完美的+1和接受 – sidarcy

以编程方式使用HTML5画布绘制此图案

回答

相关问题