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 に答える