Javascript 生成大量随机宽度和高度块，并将其与HTML5画布-EaselJS的全宽匹配

我正在努力做到以下几点：

生成随机宽度和高度块的数量（由var number指定）

将这些块填充到画布的100%宽度

到目前为止我的代码

function init() {
    //find canvas and load images, wait for last image to load
    var canvas = document.getElementById("Canvas");
    var stage = new createjs.Stage(canvas);

    // set width and height
    stage.canvas.width = 500;
    stage.canvas.height = 500;

    var number = 5;
    for(var i = 0; i < number; i++){
        var shape = new createjs.Shape();
        var shapeWidth = Math.floor(Math.random() * 100);
        var shapeHeight = 50;
        shape.graphics.beginFill('red').drawRect(0, 0, shapeWidth, shapeHeight);
        shape.x = i * 51;
        shape.y = canvas.height - 50;
        stage.addChild(shape);
        stage.update();
    }
}

函数init（）{
//查找画布并加载图像，等待加载最后一个图像
var canvas=document.getElementById（“canvas”）；
var stage=newcreatejs.stage（画布）；
//设置宽度和高度
stage.canvas.width=500；
stage.canvas.height=500；
var数=5；
对于（变量i=0；i

JSFiddle：

---

提前感谢

如果包含限制条件（如分割的最小和最大大小），则随机分割长度可能会变得非常复杂，必须保持真正的随机性（如果分割不完美，不能作弊，只需添加最后一位）

因此，简单的方法是设置一个简单的约束。将长度分成n个随机长度，每个长度不小于x

// length is the length to divide randomly
// count is the number of divisions
// min is the minimum division size
// array (optional) the array to add the data too. Will be created if not given
// returns array containing count items. Each item is a random value > min
// where the total sum of all the items is === length.
// If the array already has items then new items are added. Only the new 
// items will satisfy the length constraint.
// NOTE There is no vetting YOU MUST SUPPLY good arguments or the function
// will return nonsense.
function randomDiv(length,count,min,array = []){
    var rand, total = 0;  // total to normalise random values
    length -= count * min;  // get the remaining length after removing length
                            // used by min length
    var startAt = array.length; // If adding to array get the start index
    // get a set of random values and sum them 
    while(array.length - startAt < count){
         ran = Math.random();
         total += ran;
         array.push(ran);
     }
     // use the total sum of random values to
     // normalise the array items to be the correct length
     while(count --){
         array[startAt + count] = min + array[startAt + count] / total * length;
     }
     return array;
}

创建一组具有不同质量的长方体的步骤

// 100 small lengths  for half the canvas one or more pixels wide
var boxes = randomDiv(canvas.width / 2, 100, 1);
// get 10 more boxes for the remaining half larger than 30 pixels
boxes = randomDiv(canvas.width / 2, 10, 30, boxes);

// shuffle the array
var shuffled = [];
while(boxes.length > 0){
    shuffled.push(boxes.splice( Math.floor(Math.random() * boxes.length) , 1)[0]);
}

---

回答得好！非常感谢。

// 100 small lengths  for half the canvas one or more pixels wide
var boxes = randomDiv(canvas.width / 2, 100, 1);
// get 10 more boxes for the remaining half larger than 30 pixels
boxes = randomDiv(canvas.width / 2, 10, 30, boxes);

// shuffle the array
var shuffled = [];
while(boxes.length > 0){
    shuffled.push(boxes.splice( Math.floor(Math.random() * boxes.length) , 1)[0]);
}