2012-05-22 25 views
9

Korzystam z funkcji JavaScriptu Math.random() do dystrybuowania elementów przez wiaderka. Następnie wyświetlam wiadra w obszarze roboczym. Spodziewałbym się równomiernego rozłożenia elementów, ale wydaje się, że dystrybucja jest znacznie dokładniejsza po lewej (bliżej zera) i staje się bardziej jednolita w prawo (bliżej 1).). Zobacz następujący obraz enter image description here.JavaScript dziwne przypadkowe zachowanie

Czy robię to źle, czy też funkcja losowa JavaScript wysysa? Poniżej znajduje się kod, który został użyty do wygenerowania tego pliku:

<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);' powinno być 'ctx.fillRect (i, height-bucketList [i], 1, height);' – xiaoyi

+1

+1 za idealne zadanie tego pytania. Jest to wyraźnie sformułowane, kod jest kompletny, łatwy do naśladowania i czysty, a obraz pokazuje dokładnie to, co się dzieje. Samo pytanie jest interesujące i istotne. Dziękuję Ci! –

+0

@AdamLiss wykreślił numery niepoprawnie ... – xiaoyi

Odpowiedz

3

Pozwól mi odpowiedzieć na odpowiedź, ponieważ mój komentarz w tej kwestii ma wielką szansę zostać utracone wśród swoich sąsiadów.

Tak więc, z poprawką sugerowaną przez @xiaoyi w miejscu, obraz wygląda zupełnie przypadkowo: http://jsfiddle.net/TvNJw. Pierwotnie sugerowana w pytaniu procedura kreślenia zwiększa niepoprawnie szerokość pomalowanego wiadra jako i, podczas gdy wszystkie wiadra powinny mieć szerokość 1. Można to łatwo zobrazować, wykreślając wiadra o różnych kolorach.