javascript - JavaScript（SVG绘图）：在一个区域中定位x个点

Question

我正在使用http://raphaeljs.com/尝试绘制多个小圆圈。我遇到的问题是画布具有固定宽度，如果我想绘制 1000 个圆圈，它们不会换行（因为你必须指定每个圆圈的 xy 位置）。

例如我想要这个：

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

看起来像这样：

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

……………………………………………………………………………………………………………………

目前我正在这样做：

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);
        }
    }

供参考：圆（x坐标，y坐标，半径）

这很乱。我必须为我想要的每一行添加一个 if 语句。必须是更好的方法..？

Answer 1

你想要模数。

我不确定您的边界框到底是什么，但类似于：

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;
}