生成一些随机的宽度和高度块，并使它们适合 HTML5 canvas - EaselJS 的整个宽度

Question

我正在尝试执行以下操作：

生成一定数量（由 var number 指定）的随机宽度和高度块
将这些块填充到 canvas

到目前为止我的代码

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();
    }
}

JSFiddle：https://jsfiddle.net/n5kgbe3g/1/

提前致谢

Answer 1

如果包含约束条件（例如最小和最大分区大小），则随机划分长度会变得非常复杂，必须保持真正的随机性（不能作弊，如果分区不合适，只需添加最后一位完美）。

所以简单的方法是设置一个简单的约束。将length分成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;
}

使用

// get 20 box widths to fit canvas width  no smaller than 10 pixels
var boxes = randomDiv(canvas.width, 20, 10);

// to reuse the array. Create a referance
var boxes = [];
// each time out call the function pass the referance and empty it or 
// result is added
boxes.length = 0;
boxes = randomDiv(canvas.width, 20, 10, boxes);

创建一组不同质量的盒子

// 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]);
}

生成一些随机的宽度和高度块，并使它们适合 HTML5 canvas - EaselJS 的整个宽度

Generate a number of random width and height blocks and fit them full width of the HTML5 canvas - EaselJS

javascript

html

canvas

html5-canvas

easeljs