Javascript奇怪的随机行为答案

【问题标题】：Javascript weird random behaviorJavascript奇怪的随机行为
【发布时间】：2025-12-24 04:15:11
【问题描述】：

我正在使用 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>

【问题讨论】：

ctx.fillRect (i, height-bucketList[i], i+1, height); 应该是ctx.fillRect (i, height-bucketList[i], 1, height);
+1 完美地提出了这个问题。它的措辞清晰，代码完整，易于理解且干净，并且图像准确地显示了正在发生的事情。这个问题本身很有趣且相关。谢谢！
@AdamLiss 他错误地绘制了数字......
@xiaoyi 不过，问题的格式写得非常好。
有了@xiaoyi 建议的修复，我觉得这张照片很随意：jsfiddle.net/TvNJw

标签： javascript canvas random distribution

【解决方案1】：

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

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

【讨论】：