Javascript 使用Math.random生成随机大小的2d图像？

我正在尝试从一个数组中生成一个大小不同的花，当前单击它会添加一个新的花，但也会更改所有当前的花的大小，我想添加一个花，每个花的大小不同，下面是代码

document.body.onload = setupCanvas();

function setupCanvas() {
    var canvas = document.getElementById("garden");
    var xPositions;
    var yPositions;
    var colours;
    var speed;
    var size;

    if (canvas.getContext) {
        var ctx = canvas.getContext("2d");
        xPositions = [];
        yPositions = [];
        colours = [];
        speed = [];
        size = randomSize();

        for (var i = 0; i < 20; i++) {
            xPositions.push(Math.random() * 500);
            yPositions.push(Math.random() * 500);
            colours.push(randomColour());
            colours.push(randomColour());
            speed.push(randomSpeed());
        }
        window.setInterval(draw, 50);
    }

    function randomColour() {
        var r = Math.floor(Math.random() * 255);
        var g = Math.floor(Math.random() * 255);
        var b = Math.floor(Math.random() * 255);
        return "rgb(" + r + "," + g + "," + b + ")";
    }

    function randomSpeed() {
        return Math.floor(Math.random() * 8 + 1);
    }

    function randomSize() {
        return Math.floor(Math.random() * 30 + 5);
    }

    function draw(x, y, s) {
        ctx.fillStyle = "rgb(210, 200, 255)";
        ctx.rect(1, 1, 500, 500, );
        ctx.fill();

        for (var i = 0; i < xPositions.length; i++) {
            ctx.fillStyle = colours[i];
            ctx.beginPath();
            ctx.arc(xPositions[i] - size, yPositions[i] - size, size * 1.35, 0,
                Math.PI * 2, false);
            ctx.fill();
            ctx.beginPath();
            ctx.arc(xPositions[i] - size, yPositions[i] + size, size * 1.35, 0,
                Math.PI * 2, false);
            ctx.fill();
            ctx.beginPath();
            ctx.arc(xPositions[i] + size, yPositions[i] - size, size * 1.35, 0,
                Math.PI * 2, false);
            ctx.fill();
            ctx.beginPath();
            ctx.arc(xPositions[i] + size, yPositions[i] + size, size * 1.35, 0,
                Math.PI * 2, false);
            ctx.fill();
            ctx.beginPath();
            ctx.fillStyle = colours[i + 1];
            ctx.arc(xPositions[i], yPositions[i], size, 0, Math.PI * 2, false);
            ctx.fill();
            if (yPositions[i] > 600) {
                yPositions[i] = Math.random() * -350;
            } else {
                yPositions[i] += speed[i];
            }
        }
    }

    document.getElementById("garden").addEventListener("click", addFlower);

    function addFlower(e) {
        size = randomSize();
        xPositions.push(e.offsetX);
        yPositions.push(e.offsetY);
        colours.push(randomColour());
        colours.push(randomColour());
        speed.push(randomSpeed());

    }

    document.getElementById("remove").addEventListener("click", removeFlower);

    function removeFlower() {
        xPositions.splice(0, 1);
        yPositions.splice(0, 1);
        colours.splice(0, 1);
        speed.splice(0, 1);
    }
}

document.body.onload=setupCanvas（）；
函数setupCanvas（）{
var canvas=document.getElementById（“花园”）；
var xPositions；
变量位置；
颜色；
无功转速；
变量大小；
if（canvas.getContext）{
var ctx=canvas.getContext（“2d”）；
xPositions=[]；
yPositions=[]；
颜色=[]；
速度=[]；
大小=随机大小（）；
对于（变量i=0；i<20；i++）{
push（Math.random（）*500）；
yPositions.push（Math.random（）*500）；
颜色。按（随机颜色（））；
颜色。按（随机颜色（））；
速度。推（随机速度（））；
}
窗口设置间隔（绘制，50）；
}
函数{
var r=Math.floor（Math.random（）*255）；
var g=Math.floor（Math.random（）*255）；
var b=Math.floor（Math.random（）*255）；
返回“rgb”（“+r+”、“+g+”、“+b+”）；
}
函数随机速度（）{
返回Math.floor（Math.random（）*8+1）；
}
函数大小（）{
返回Math.floor（Math.random（）*30+5）；
}
功能图（x、y、s）{
ctx.fillStyle=“rgb（210200255）”；
ctx.rect（1,1500,500，）；
ctx.fill（）；
对于（var i=0；i600）{
yPositions[i]=Math.random（）*-350；
}否则{
位置[i]+=速度[i]；
}
}
}
document.getElementById（“garden”）.addEventListener（“单击”，addFlower）；
函数addFlower（e）{
大小=随机大小（）；
xPositions.push（e.offsetX）；
i位置。推动（例如偏移）；
颜色。按（随机颜色（））；
颜色。按（随机颜色（））；
速度。推（随机速度（））；
}
document.getElementById（“删除”）.addEventListener（“单击”，删除）；
函数removeFlower（）{
X位置拼接（0,1）；
位置。拼接（0，1）；
颜色.拼接（0,1）；
拼接速度（0,1）；
}
}

以及HMTL代码：

<!DOCTYPE html>
<html>

<head>
    <title>52DA session 5</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="../css/style.css" />
</head>

<body>
    <div id="container">
        <h1 id="firstHeading" class="blueTxt">Arrays</h1>

        <canvas id="garden" width="500" height="500">

            <p>This example requires a browser that supports the
                <a href="http://www.w3.org/html/wg/html5/">HTML5</a> canvas feature.</p>

        </canvas>

        <form>
            <input type="button" id="remove" onclick="" value="Remove Flower" />
        </form>
        <br />

    </div>
    <script src="../js/flower_script.js"></script>
</body>

</html>

52DA第5次会议
阵列
此示例要求浏览器支持
画布功能

---

非常感谢您的光临

您对待

大小

的方式不同于

x

、

y

或

速度

特性。有

size

被理解为一个全局变量，在所有的花中共享

您需要创建一个数组

size

，并应用与其他flower属性相同的逻辑

size = [];

for (var i = 0; i < 20; i++) {
    xPositions.push(Math.random() * 500);
    yPositions.push(Math.random() * 500);
    colours.push(randomColour());
    colours.push(randomColour());
    speed.push(randomSpeed());
    size.push(randomSize());                 // Push a random size number to the array
}

最后，

addFlower

函数也应该与上面的模式一致：

function addFlower(e) {
    xPositions.push(e.offsetX);
    yPositions.push(e.offsetY);
    colours.push(randomColour());
    colours.push(randomColour());
    speed.push(randomSpeed());
    size.push(randomSize());                // Push a random size number to the array
}

function addFlower(e) {
    xPositions.push(e.offsetX);
    yPositions.push(e.offsetY);
    colours.push(randomColour());
    colours.push(randomColour());
    speed.push(randomSpeed());
    size.push(randomSize());                // Push a random size number to the array
}