生成许多​​随机宽度和高度块，并使其适合 HTML5 画布的全宽 - EaselJS

Posted 2023-03-05

【中文标题】生成许多​​随机宽度和高度块，并使其适合 HTML5 画布的全宽 - EaselJS

【英文标题】：Generate a number of random width and height blocks and fit them full width of the HTML5 canvas - EaselJS

【发布时间】：2017-09-16 17:23:00

【问题描述】：

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

生成一定数量（由 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();
    

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

提前致谢

【参考方案1】：

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

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

【讨论】：

很好的答案！谢谢。