#HTML 的 <canvas> 标签

<canvas> 元素可被用来通过 JavaScript（Canvas API 或 WebGL API）绘制图形及图形动画。

#属性

• height: 该元素占用空间的高度，以 CSS 像素（px）表示，默认为 150。
• moz-opaque（废弃）: 通过设置这个属性，来控制 canvas 元素是否半透明。如果你不想 canvas 元素被设置为半透明，使用这个元素将可以优化浏览器绘图性能。
• width: 该元素占用空间的宽度，以 CSS 像素（px）表示，默认为 300。

#示例

<canvas id="myCanvas">
</canvas>

<script>
    // 2. 获取 Canvas 上下文
    const canvas = document.getElementById("myCanvas");
    const ctx = canvas.getContext("2d");

    // 3. 设置画布尺寸为窗口大小
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    // 4. 定义小球对象
    const ball = {
        x: canvas.width / 2,
        y: canvas.height / 2,
        radius: 20,
        dx: 4,  // x轴速度
        dy: 4,  // y轴速度
        color: `hsl(${Math.random() * 360}, 70%, 50%)`
    };

    // 5. 绘制小球的函数
    function drawBall() {
        ctx.beginPath();
        ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2);
        ctx.fillStyle = ball.color;
        ctx.fill();
        ctx.closePath();
    }

    // 6. 动画循环
    function animate() {
        // 清空画布（半透明效果会产生拖尾）
        ctx.fillStyle = "rgba(255, 255, 255, 0.1)";
        ctx.fillRect(0, 0, canvas.width, canvas.height);

        drawBall();

        // 碰撞检测（碰到边缘反弹）
        if (ball.x + ball.radius > canvas.width || ball.x - ball.radius < 0) {
            ball.dx = -ball.dx;
            ball.color = `hsl(${Math.random() * 360}, 70%, 50%)`; // 随机变色
        }
        if (ball.y + ball.radius > canvas.height || ball.y - ball.radius < 0) {
            ball.dy = -ball.dy;
            ball.color = `hsl(${Math.random() * 360}, 70%, 50%)`;
        }

        // 更新位置
        ball.x += ball.dx;
        ball.y += ball.dy;

        requestAnimationFrame(animate);
    }

    // 7. 启动动画
    animate();
</script>

<canvas>