2012-05-22 22 views
9

Ich verwende JavaScript Math.random() Funktion, um Elemente über Eimer zu verteilen. Danach zeige ich die Eimer in einer Leinwand an. Ich würde erwarten, dass die Objekte gleichmäßig verteilt werden, aber (selbst nach mehreren Wiederholungen in mehreren Browsern) scheint die Verteilung links viel feinkörniger zu sein (näher an Null) und wird nach rechts gleichmäßiger (näher an 1)). Siehe das folgende Bild enter image description here.Javascript seltsames zufälliges Verhalten

Mache ich es falsch, oder ist die Zufallsfunktion von JavaScript suck? Unten ist der Code, der dieses Bild verwendet wurde, zu erzeugen:

<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> 
+3

'ctx.fillRect (i, height-bucketList [i], i + 1, height);' sollte 'ctx.fillRect (i, height-bucketList [i], 1, height) sein;' – xiaoyi

+1

+1 um diese Frage perfekt zu stellen. Es ist klar formuliert, der Code ist vollständig, einfach zu folgen und sauber, und das Bild zeigt genau, was passiert. Die Frage selbst ist interessant und relevant. Vielen Dank! –

+0

@AdamLiss er zeichnete die Zahlen falsch ... – xiaoyi

Antwort

3

Lassen Sie mich mit einer Antwort reagieren, da mein Kommentar auf die Frage eine große Chance hat unter seinen Nachbarn verloren.

Also, mit der von @xiaoyi vorgeschlagenen Lösung, sieht das Bild ziemlich zufällig zu mir: http://jsfiddle.net/TvNJw. Die ursprünglich in der Frage vorgeschlagene Plot-Routine erhöht die Breite des gemalten Eimers um i, während alle Eimer die Breite 1 haben sollten. Dies kann leicht durch Auftragen von Eimern mit verschiedenen Farben dargestellt werden.