9

我正在使用 JavaScript 的Math.random()函数将项目分配到存储桶中。之后，我在画布上显示桶。我希望这些项目能够均匀分布，但是（即使在多个浏览器中多次重试之后），左侧的分布似乎更加精细（接近于零）并且向右变得更加均匀（接近 1 ）。见下图在此处输入图像描述。

是我做错了，还是 JavaScript 的随机函数很烂？以下是用于生成此图像的代码：

<html>
    <head>
        <script>
            window.onload = function() {
                    var canvas = document.getElementById('canvas');
                    var ctx = canvas.getContext('2d');
                    var width = canvas.width;
                    var height = canvas.height;     
                    var buckets = width;
                    var total = width*height*0.3;
                    var bucketList = [];
                    // initialized each bucket to 0 items
                    for(var i=0; i<buckets; ++i) { 
                            bucketList[i] = 0;  
                    }
                    // distribute all items over the buckets
                    for(var i=0; i<total; ++i) {
                        ++bucketList[Math.floor(Math.random()*buckets)];
                    }
                    // draw the buckets
                    ctx.fillStyle = "rgb(200,0,0)";
                    for(var i=0; i<buckets; ++i) {
                        ctx.fillRect (i, height-bucketList[i], i+1, height);  
                    }
            }
            </script>
    </head>
    <body>
            <canvas id="canvas" width="1000px" height="500px"/>
    </body>
</html>
4

1 回答 1

3

让我回答一个答案，因为我对这个问题的评论很有可能在它的邻居中丢失。

所以，有了@xiaoyi 建议的修复程序，这张照片对我来说看起来很随机：http: //jsfiddle.net/TvNJw。最初在问题中建议的绘图例程错误地随着增长而增加了绘制的桶宽度i，而所有桶的宽度都应为1. 这可以很容易地通过绘制不同颜色的桶来描述。

于 2012-05-22T11:04:12.237 回答