canvas js 欣赏

// 以下是使用 Canvas 和 JavaScript 绘制一个简单动画的示例代码

// 获取 canvas 元素和上下文
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// 定义动画对象
let position = 0;

function draw() {
    // 清除画布
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // 绘制一个移动的矩形
    ctx.fillStyle = 'blue';
    ctx.fillRect(position, 50, 50, 50);

    // 更新位置
    position += 2;
    if (position > canvas.width) {
        position = 0;
    }

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

// 开始动画
draw();

解释说明：

1. 获取 Canvas 元素和上下文：通过 document.getElementById 获取 Canvas 元素，并使用 getContext('2d') 获取 2D 绘图上下文。
2. 定义动画对象：定义一个变量 position 来跟踪矩形的位置。
3. 绘制函数：draw 函数负责清除画布、绘制矩形并更新其位置。每次调用时，矩形都会向右移动 2 像素。
4. 请求下一帧动画：使用 requestAnimationFrame 来递归调用 draw 函数，从而实现平滑的动画效果。
5. 开始动画：调用 draw 函数启动动画。

这个示例展示了如何使用 HTML5 的 Canvas 和 JavaScript 创建一个简单的动画效果。