什么是JavaScript的Canvas_它如何绘制图形和动画呢
Canvas 是 HTML5 的位图绘图 API，通过 getContext('2d') 获取上下文并基于路径机制绘图，动画需清屏、更新状态、重绘，依赖 requestAnimationFrame 实现流畅效果。
Canvas 是 HTML5 提供的一个绘图 API，本质是一块“空白画布”，通过 JavaScript 操作它的上下文（context）来绘制图形、图像、文字，甚至实现动画。
Canvas 是一个 DOM 元素，本身不绘图
它只是一个容器，真正绘图靠的是 2D 渲染上下文（getContext('2d')）。没有上下文，Canvas 就只是个透明的空盒子。
- 必须先用
document.getElementById()获取 canvas 元素 - 再调用
.getContext('2d')得到绘图接口 - 所有绘制操作（如画线、填色、画圆）都通过这个上下文对象调用方法完成
绘制图形：从路径到渲染
Canvas 绘图基于“路径”（path
）机制——先定义形状轮廓，再选择描边（stroke()）或填充（fill()）。
-
beginPath()开始新路径（清空上一次路径记录） -
moveTo(x, y)把画笔移到起点 -
lineTo(x, y)画直线到目标点 -
arc(x, y, r, startAngle, endAngle)画圆弧（可组合成圆或扇形） -
fill()填满闭合区域，stroke()描出路径边缘
例如画一个实心红圆：
ctx.beginPath();
ctx.arc(100, 100, 50, 0, Math.PI * 2);
ctx.fillStyle = 'red';
ctx.fill();
实现动画：重绘 + 定时循环
Canvas 本身不支持“图层”或“对象模型”，动画靠的是：清空画布 → 更新数据 → 重新绘制。核心是 requestAnimationFrame()（比 setTimeout 更流畅）。
- 每次动画帧中，先用
ctx.clearRect(0, 0, width, height)清屏 - 更新图形位置、颜色、大小等状态变量（比如
x += 2） - 用最新状态重新调用绘图命令
- 最后递归调用
requestAnimationFrame(animate)继续下一帧
注意几个关键细节
Canvas 是位图，放大后会模糊；不保留绘制历史，无法直接点击某个图形——想交互就得自己记录坐标和逻辑。适合游戏、数据可视化、图像处理等高性能场景，但不适合复杂 UI 或频繁重排版。
基本上就这些。不复杂但容易忽略：清画布、管理状态、用对帧函数——画得出来，动得自然，才算是用好了 Canvas。
