Question

我正在尝试从数组生成大小不同的花，当前单击它会添加新花，但也会更改所有当前花的大小，id喜欢添加花，并且每个花的大小都不同其他花，这是代码...

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

和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>

非常感谢高级！

Answer 1

您将size与x，y或speed特性区别对待。 size被理解为在所有花朵之间共享的全局变量。

您需要创建一个数组size，并应用与其余花属性相同的逻辑。

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
}

现在在功能draw中，访问size与访问x或y相同：

function draw(x, y, s) {
    // skipped ...
    for (var i = 0; i < xPositions.length; i++) {
        ctx.fillStyle = colours[i];
        ctx.beginPath();
        ctx.arc(xPositions[i] - size[i], yPositions[i] - size[i], size[i] * 1.35, 0,
            Math.PI * 2, false);
        // skipped ...

最后，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
}

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

1 个答案: