如何使用HTML5畫布以編程方式繪製以下圖案?以編程方式使用HTML5畫布繪製此圖案
我有邏輯畫圓圈here。此外,我可以畫出圓弧看到這個bin然而,我正在努力將所有的數學一起進入下面的模式。
據7個弧,每個含有不同量的圓(外到內:33,29,26,23,21,18,15)
Im不熟悉帆布但認爲它可能是解決我的問題。
如何使用HTML5畫布以編程方式繪製以下圖案?以編程方式使用HTML5畫布繪製此圖案
我有邏輯畫圓圈here。此外,我可以畫出圓弧看到這個bin然而,我正在努力將所有的數學一起進入下面的模式。
據7個弧,每個含有不同量的圓(外到內:33,29,26,23,21,18,15)
Im不熟悉帆布但認爲它可能是解決我的問題。
你可以做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
希望這有助於!
你有試過什麼嗎? – magreenberg
你試過只畫一行嗎? – hoomi
事實上,我有邏輯在這裏繪製圓圈https://jsbin.com/degurexaxa/edit?html,js,output,我可以繪製圓弧參見:https://jsbin.com/dikogugafu/edit?html, js,輸出我更加努力地將數學融合在一起。 我會更新我的問題與上述鏈接,我會很感激,如果你投了我的問題,你重新考慮。我只是探索Canvas作爲一個選項。 – sidarcy