以編程方式使用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畫布繪製此圖案

回答

相關問題