Question

我正在使用JavaScript的Math.random()函数来分配项目。然后，我在画布中显示桶。我希望这些项目能够均匀分布，但是（即使在多个浏览器中多次重试之后），看起来左边的分布更接近细粒度（接近于零）并且向右变得更均匀（接近1））。请参见下图 enter image description here 。

我做错了，还是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>

Answer 1

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

所以，通过@xiaoyi建议的修复，图片对我来说非常随机：http://jsfiddle.net/TvNJw。最初在问题中建议的绘图程序错误地增加了涂漆桶宽度i增长，而所有桶应该具有1的宽度。这可以通过绘制不同颜色的桶来轻松描绘。

Javascript奇怪的随机行为

1 个答案: