fillRect()和strokeRect()可直接绘制矩形，无需路径操作；画圆必须用arc()配合beginPath()、fill()/stroke()；自定义图形需moveTo()+lineTo()+closePath()组合，并注意路径状态管理。
用 fillRect() 和 strokeRect() 画矩形最直接
Canvas 绘制矩形不需要路径操作，两个 API 就够用：fillRect() 填充实心矩形，strokeRect() 只描边。它们参数统一：左上角 x、y，宽 width、高 height。
注意：坐标原点在 canvas 左上角，y 增大是向下，不是数学坐标系；且这些方法不依赖当前路径，调用后也不会改变路径状态（比如不会自动 beginPath()）。
- 如果先调了
fill()或stroke()再画矩形，不影响矩形渲染——因为矩形绘制是独立的 - 多次调用
fillRect()不会累积路径，也不需要手动beginPath() - 想让矩形带圆角？得换
rect()+arcTo()或用 CSSborder-radius配合离屏 canvas，原生矩形 API 不支持
const ctx = canvas.getContext('2d');
ctx.fillStyle = '#4a90e2';
ctx.fillRect(10, 20, 120, 80); // 实心蓝矩形
ctx.strokeStyle = '#d32f2f';
ctx.lineWidth = 3;
ctx.strokeRect(50, 60, 100, 40); // 红边框矩形
画圆形必须走路径：用 arc() 而不是 circle()
Canvas 没有 drawCircle() 这种方法。arc() 是唯一可靠画圆/圆弧的方式，它本质是画一段路径，所以必须配合 beginPath()、fill() 或 stroke() 才能显形。
常见错误是漏掉 beginPath()，导致新圆叠加在旧路径上，再调 fill() 就把之前所有未闭合路径一起填了；或者误用 arcTo()（它只适用于已存在两条切线的场景，不适合画标准圆）。
-
arc(x, y, radius, startAngle, endAngle, anticlockwise)：角度单位是弧度，不是度数 - 画整圆要确保
endAngle - startAngle === 2 * Math.PI，否则只是圆弧 - 顺时针画圆设
anticlockwise = false（默认值），但填充方向不影响视觉结果
const ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(150, 100, 40, 0, Math.PI * 2); // 圆心(150,100)，半径40，整圈
ctx.fillStyle = '#7c4dff';
ctx.fill();
moveTo() + lineTo() + closePath() 是自定义路径的核心组合
所有非矩形、非圆的图形（比如三角形、五角星、不规则多边形）都得靠这个组合手绘路径。它模拟的是“抬笔→落笔→连线→封口”的过程，每步都影响当前路径状态。
最容易出错的是忘记 beginPath() —— 如果前面画过别的图形且没重置路径，新 moveTo() 会从上一个路径终点开始连，而不是你预期的起点；还有就是 closePath() 并不自动 stroke() 或 fill()，只是补一条线回起点。
-
moveTo(x, y)抬笔移到某点，不画线 -
lineTo(x, y)落笔画直线到该点 -
closePath()自动加一条线回到路径起始点（即第一次moveTo()的位置） - 路径一旦
fill()或stroke()，就清空了，后续操作需重新beginPath()
const ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(200, 50);
ctx.lineTo(250, 150);
ctx.lineTo(150, 150);
ctx.closePath(); // 自动连回 (200, 50)
ctx.fillStyle = '#ff6f00';
ctx.fill();
路径绘制后不显示？先查这三件事
Canvas 路径绘制是“声明式”的：定义好路径，再调 fill() 或 stroke() 才真正渲染。很多初学者卡在这一步，以为画完 arc() 或 lineTo() 就该看见图形了。
- 是否漏了
beginPath()？尤其在循环画多个图形时，不重置路径会导致意外连接 - 是否调用了
fill()或stroke()？只定义路径不会显示任何东西 - 是否设置了
fillStyle或strokeStyle？默认是黑色，但如果 canvas 背景也是深色，可能看不清；透明色或'transparent'也会导致“看不见”
路径本身不可见，没有“轮廓线”概念；stroke() 的宽度受 lineWidth 控制，但它的绘制位置是路径中心线，不是内侧或外侧——这点在画细边框时容易偏移一像素。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
