JavaScript（SVG繪圖）：在一個區域中定位x點數

Question

我使用http://raphaeljs.com/來嘗試繪製多個小圓圈。我遇到的問題是畫布的寬度是固定的，如果我想繪製1000個圓圈，它們不會換行到「新行」（因爲您必須指定每個圓圈的xy位置）。

E.g. 我想要這個：

......................................... .........

看起來像這樣：

............................

......................

目前，我這樣做：

for (var i = 0; i < 1000; i++) { 
     var multiplier = i*3; 
     if (i <= 50) { 
      paper.circle((2*multiplier),2,2); 
     } else if (i >= 51 && i <= 101) { 
      paper.circle((2*multiplier) - 304,8,2); 
     } else if (i >= 152 && i <= 202) { 
      paper.circle((2*multiplier) - 910,14,2); 
     } 
    } 

供參考：circle（x co-ord，y co-ord，radius）

這很混亂。我必須爲每一個我想要的新行添加一條if語句。必須是一個更好的方式來做到這一點..？

Answer 1

你想要modulo。

我不知道你的邊框到底是什麼，但這樣的：

var width = 300; 
for (var i = 0; i < 1000; i++) { 
    var multiplier = i*3; 
    var x = 2 * multiplier * i % width; 
    var y = 2 + 6 * (i + 50)/100; 
}