canvas（二）-动画（2d）

<canvas> 动画是通过 JavaScript 动态更新画布内容来实现的。它利用 requestAnimationFrame 方法实现平滑的动画效果，适用于游戏、数据可视化、交互式图形等场景。真的需要数据可视化等场景使用，还是直接引入外部模型还原度比较高，但同时无论哪种，都对设备有基本的要求。

---

1. 动画的基本概念

(1) 动画原理

• 逐帧绘制：动画是通过在每一帧中清除画布并重新绘制内容来实现的。
• 时间控制：通过 requestAnimationFrame 控制动画的帧率，确保动画流畅。
• 状态更新：在每一帧中更新图形的位置、大小、颜色等属性。

(2) 关键点

• 清除画布：使用 clearRect 清除上一帧的内容。
• 更新状态：根据时间或用户输入更新图形属性。
• 重新绘制：在每一帧中重新绘制图形。

---

2. 动画的实现步骤

(1) 初始化画布

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

(2) 定义动画状态

let x = 0; // 图形的初始位置
const speed = 2; // 移动速度

(3) 绘制函数

function draw() {
   
  ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除画布
  ctx.fillRect(x, 50, 100, 50); // 绘制图形
  x += speed