个人中心
gpt4 book ai didi

javascript - 使用 Math.random 生成随机大小的二维图像？

转载 作者：行者123 更新时间：2023-11-28 02:28:38 25 4
gpt4 key购买 nike

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

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

和 HTML 代码:

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

非常感谢!

最佳答案

您对待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
}

关于javascript - 使用 Math.random 生成随机大小的二维图像？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52352653/

25 4 0
文章推荐： css - 在带有子项的菜单项上禁用标记 [Wordpress]
文章推荐： javascript - 对 JavaScript 的 'this' 对象和 'var' 声明变量感到困惑
文章推荐： javascript - 如何编写智能 onblur 事件
文章推荐： html - 使用 VBA 将带有 HTML 标记的文本呈现为 Word 表格中的格式化文本
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com