编辑:这是使用谷歌浏览器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/