编辑:这是使用谷歌浏览器36

我正在弄乱html5 Canvas ,生成随机分布在多维数据集中的点并将其投影到2D Canvas 上。令人惊讶的是,结果根本看起来并不十分对称,我怀疑Javascript的Math.random()让我失望了。

谁能告诉我为什么会这样吗?是否有可能使它看起来随机而不会变慢?

var ctx = canvas.getContext('2d');

for (var i = 0; i < 10000000; i++) {
    var x = Math.random()*2-1, y = Math.random()*2-1, z = 2+Math.random()*2-1;
    x = (.5 + .5*x/z) * canvas.width;
    y = (.5 + .5*y/z) * canvas.height;
    ctx.fillRect(Math.floor(x), Math.floor(y), 1, 1);
}

http://jsfiddle.net/y10tvj26/(需要一段时间才能加载)

最佳答案

Chrome的documented issue与随后对Math.random()的调用相关。在您的算法中,相关值将倾向于落在 Canvas 上的一条线上。额外调用Math.random()将打破这种关联。我还没有看到其他浏览器受到影响的报告。

只需在每次调用时多给Math.random()打电话,您就会得到想要的东西。

var ctx = canvas.getContext('2d');

function r() {
    Math.random();
    return Math.random();
}
for (var i=0; i<10000000; i++) {
    var x = r()*2-1, y = r()*2-1, z = 2+r()*2-1;
    x = (.5 + .5*(x/z)) * canvas.width;
    y = (.5 + .5*(y/z)) * canvas.height;
    ctx.fillRect(x, y, 1, 1);
}

更新:http://jsfiddle.net/y10tvj26/5/

07-24 09:44
查看更多