JavaScript中动态生成无限随机颜色：实现原理与应用

var colorArray = ['blue', 'red', 'green', 'yellow', 'white'];

function Ball(x, y, radius, xd, yd) {
    this.x = x;
    this.y = y;
    this.radius = radius;
    this.xd = xd;
    this.yd = yd;
    // 从固定数组中选择颜色
    this.color = colorArray[Math.floor(Math.random() * colorArray.length)];
}

function Ball(x, y, radius, xd, yd) {
    this.x = x;
    this.y = y;
    this.radius = radius;
    this.xd = xd;
    this.yd = yd;

    // 生成一个随机的十六进制颜色
    this.color = '#' + Math.floor(Math.random() * 16777215).toString(16).padStart(6, '0');
}

// 示例：创建并绘制多个具有随机颜色的球
var ballArray = [];
var screenWidth = 800; // 假设屏幕宽度

// 模拟创建一些球
for (let i = 0; i < 10; i++) {
    let randomX = Math.random() * screenWidth;
    let randomY = Math.random() * 200; // 初始Y坐标
    let randomRadius = 10 + Math.random() * 15;
    let randomXd = (Math.random() - 0.5) * 5; // 随机X方向速度
    let randomYd = (Math.random() - 0.5) * 5; // 随机Y方向速度
    ballArray.push(new Ball(randomX, randomY, randomRadius, randomXd, randomYd));
}

// 模拟绘图上下文 (在实际Canvas应用中，ctx会是CanvasRenderingContext2D对象)
// var ctx = document.getElementById('myCanvas').getContext('2d');

// 假设的绘制函数
function drawBall(ctx) { // 实际应用中需要传入ctx
    // ctx.clearRect(0, 0, screenWidth, screenHeight); // 清除画布
    for (var i = 0; i < ballArray.length; i++) {
        var ball = ballArray[i];
        // 将球的随机颜色应用到绘图样式
        // console.log(`Drawing ball at (${ball.x}, ${ball.y}) with color: ${ball.color}`);
        if (ctx) { // 仅在有实际ctx时进行绘制
            ctx.fillStyle = ball.color;
            ctx.beginPath();
            ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2);
            ctx.fill();
            ctx.closePath();
        }

        // 更新球的位置 (简化，不包含重力或边界反弹)
        ball.x += ball.xd;
        ball.y += ball.yd;

        // 简化的边界检查
        if (ball.x + ball.radius > screenWidth || ball.x - ball.radius < 0) {
            ball.xd *= -1;
        }
        if (ball.y + ball.radius > 400 || ball.y - ball.radius < 0) { // 假设画布高度为400
            ball.yd *= -1;
        }
    }
    // requestAnimationFrame(drawBall.bind(null, ctx)); // 动画循环
}

// 在实际应用中，你需要一个Canvas元素和渲染循环来看到效果
// 例如：
/*
const canvas = document.createElement('canvas');
canvas.width = screenWidth;
canvas.height = 400;
document.body.appendChild(canvas);
const ctx = canvas.getContext('2d');

function animate() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    drawBall(ctx);
    requestAnimationFrame(animate);
}
animate();
*/