2012-05-22 2 views
9

Я использую функцию Math.random() JavaScript для распространения элементов по ковши. Впоследствии я показываю ведра на холсте. Я бы ожидал, что элементы будут распределены равномерно, но (даже после нескольких попыток в нескольких браузерах) кажется, что распределение намного более мелкозернистым слева (ближе к нулю) и становится более равномерным вправо (ближе к 1). См. Следующее изображение: enter image description here.Javascript weird random behavior

Я делаю это неправильно или случайная функция 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> 
+3

'ctx.fillRect (i, height-bucketList [i], i + 1, height);' должно быть 'ctx.fillRect (i, height-bucketList [i], 1, height);' – xiaoyi

+1

+1 для того, чтобы задать этот вопрос совершенно. Он четко сформулирован, код закончен, прост в использовании и чист, и изображение точно показывает, что происходит. Сам вопрос интересен и уместен. Спасибо! –

+0

@AdamLiss он неправильно отобразил числа ... – xiaoyi

ответ

3

Позволь мне ответить с ответом, так как мой комментарий по этому вопросу имеет большой шанс быть потеряны среди своих соседей.

Итак, с исправлением, предложенным @xiaoyi на месте, картина выглядит довольно случайной для меня: http://jsfiddle.net/TvNJw. Предложенная в вопросе процедура построения графика ошибочно увеличивает ширину окрашенного ковша, так как i растет, а все ведра должны иметь ширину 1. Это можно легко описать, построив ведра с разными цветами.