面试宝典 ＜canvas＞ 小球碰壁回弹(HTML新增标签canvas示例)

<canvas id="myCanvas" width="600" height="400"></canvas>

<script>
    const canvas = document.getElementById('myCanvas');
    const ctx = canvas.getContext('2d');

    // 球体对象
    let ball = {
        x: 100,
        y: 100,
        radius: 20,
        vx: 2, // 初始水平速度
        vy: 2, // 初始垂直速度
        color: '#3498DB'
    };

    // 渲染场景
    function drawGame() {
        // 清除画布
        ctx.clearRect(0, 0, canvas.width, canvas.height);

        // 绘制球体
        ctx.beginPath();
        ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2);
        ctx.fillStyle = ball.color;
        ctx.fill();

        // 更新球体位置
        ball.x += ball.vx;
        ball.y += ball.vy;

        // 检测碰撞
        if (ball.x + ball.radius >= canvas.width || ball.x - ball.radius <= 0) {
            ball.vx = -ball.vx; // 反弹
        }
        if (ball.y + ball.radius >= canvas.height || ball.y - ball.radius <= 0) {
            ball.vy = -ball.vy; // 反弹
        }

        // 请求下一帧动画
        requestAnimationFrame(drawGame);
    }

    // 启动
    drawGame();
</script>