JavaScript操作Canvas需先获取元素及2D上下文，再设样式、绘图（分路径定义与填充/描边）、清空重绘；须注意beginPath()、width/height设置及requestAnimationFrame动画。
要用 JavaScript 操作画布（<canvas></canvas>），核心是获取 Canvas 元素的 2D 渲染上下文，然后调用它的绘图方法。Canvas 是位图绘制，不保留图形对象，所有绘制都是“即刻生效、不留痕迹”的——画完就只是像素，没有“这个圆还能拖动”这种概念。
1. 获取 canvas 元素和 2D 上下文
这是所有操作的前提。必须先拿到 DOM 元素，再通过 getContext('2d') 获取绘图环境：
- 确保 HTML 中有
<canvas id="myCanvas" width="400" height="300"></canvas> - JS 中写：
const canvas = document.getElementById('myCanvas'); - 接着：
const ctx = canvas.getContext('2d');—— 这个ctx就是你后续所有绘图操作的对象 - 注意：宽高最好用
canvas.width/canvas.height设置（而非 CSS），否则图像会被拉伸
2. 设置绘图样式与状态
在真正画之前，通常要配置颜色、线宽、填充/描边方式等。这些是上下文的状态，会影响之后所有绘制：
-
ctx.fillStyle = '#ff6b35';—— 填充颜色（用于 fillRect、fill() 等） -
ctx.strokeStyle = 'blue';—— 描边颜色（用于 strokeRect、stroke() 等） -
ctx.lineWidth = 2;—— 线宽（单位像素） -
ctx.lineCap = 'round';—— 线端样式（'butt'/'round'/'square'） - 可随时用
ctx.save()和ctx.restore()保存/恢复当前状态（比如临时改颜色画一笔，再还原）
3. 绘制基本图形（路径 + 填充/描边）
Canvas 绘图分两步：先定义路径（path），再执行填充（fill()）或描边（stroke()）。矩形是例外，它有快捷方法：
立即学习“Java免费学习笔记（深入）”；
- 矩形（快捷）：
ctx.fillRect(x, y, width, height);（实心）、ctx.strokeRect(x, y, width, height);（空心） - 圆形/弧线：用
ctx.beginPath(); ctx.arc(x, y, radius, startAngle, endAngle); ctx.fill(); - 直线/多边形：用
moveTo()定起点，lineTo()连点，最后closePath()闭合（可选），再fill()或stroke() - 注意：
beginPath()很关键！它清空上一次路径，避免意外连接
4. 清空画布与重绘逻辑
Canvas 不自动刷新，也不会记住你画过什么。需要手动清空或覆盖旧内容才能实现动画或交互：
- 全屏清空：
ctx.clearRect(0, 0, canvas.width, canvas.height); - 局部清空：传入任意矩形区域坐标和尺寸
- 重绘推荐模式：清空 → 更新数据（如坐标）→ 重新绘制全部图形（不要试图“只改一个圆”，而是整帧重画）
- 动画可用
requestAnimationFrame驱动，比setTimeout更平滑
基本上就这些。Canvas API 不复杂但容易忽略细节，比如忘记 beginPath() 导致路径叠加，或用 CSS 缩放导致模糊。动手画一个矩形、一个圆、一条线，跑通这四步，你就已经入门了。
