fillRect 和 strokeRect 是唯二无需 beginPath 的矩形绘制方法，但会保留全局样式状态；画圆必须用 arc 且角度单位为弧度，需注意坐标系、像素尺寸与 CSS 缩放区别。
用 fillRect 和 strokeRect 画矩形，别漏掉 beginPath
Canvas 绘图必须先获取上下文，再调用绘图方法。画实心矩形直接用 fillRect(x, y, width, height)，描边矩形用 strokeRect(x, y, width, height)。这两个是唯一不需要路径操作的绘图方法，但正因为“省事”，容易误以为其他图形也能这么干——其实不能。
常见错误：在调用 fillRect 后立刻画圆，发现圆被意外填充或颜色错乱。这是因为 fillStyle 和 strokeStyle 是全局状态，且 fillRect 不触发路径重置。虽然它自己不依赖路径，但会干扰后续需要 beginPath() 的操作。
-
fillRect和strokeRect是独立命令，不参与路径系统，也不受closePath()影响 - 如果之后要画圆、线段等，务必在调用前加
ctx.beginPath()，否则可能复用上一次路径导致渲染异常 - 坐标
(x, y)指的是矩形左上角，不是中心点——这点和arc的圆心坐标逻辑不同，容易画偏
画圆形必须用 arc，startAngle 和 endAngle 单位是弧度
Canvas 没有 drawCircle 这样的快捷方法，所有圆/圆弧都靠 arc(x, y, radius, startAngle, endAngle, anticlockwise)。最常踩的坑是角度单位：它不用度数，而用弧度。写 90 不代表 90°，而是 90 弧度（≈5156°），结果啥也画不出来。
正确做法是把角度转成弧度：乘以 Math.PI / 180。画整圆就是从 0 到 2 * Math.PI。
立即学习“前端免费学习笔记（深入）”；
const ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(100, 100, 40, 0, 2 * Math.PI); // 圆心(100,100)，半径40，完整一圈
ctx.fillStyle = '#ff6b6b';
ctx.fill();- 漏掉
beginPath()会导致新圆叠加在旧路径上，fill()可能填充出奇怪形状 - 第三个参数是半径，不是直径；第四个参数是起始弧度，第五个是结束弧度，第六个是顺时针（
false）还是逆时针（true） - 如果只要圆边框，用
stroke()替代fill()，别忘了设strokeStyle
想画正圆却变成椭圆？检查 canvas 元素的 CSS 宽高设置
Canvas 渲染分辨率由 HTML 属性 width 和 height 决定，不是 CSS 的 style.width 或 style.height。如果只用 CSS 缩放 canvas（比如设 style="width:100%; height:200px"），画布像素没变，只是被拉伸了，圆必然变椭圆。
正确做法是：要么让 CSS 尺寸和 HTML 属性一致；要么动态同步——比如监听窗口 resize，用 canvas.width = canvas.clientWidth 重设像素宽高，再重绘。
- HTML 中写
<canvas width="400" height="300"></canvas>才定义真实绘图区域 - CSS 的
width/height只控制显示大小，不改变像素网格 - 用
getBoundingClientRect()获取实际显示尺寸，再按比例缩放绘图坐标，比硬设 CSS 更稳妥
fill() 和 stroke() 的顺序影响最终效果
同一个路径，先 fill() 再 stroke()，边缘会被填充色盖住一部分；反过来先 stroke() 后 fill()，描边可能被完全覆盖。这不是 bug，是绘制顺序决定的图层叠加行为。
更隐蔽的问题是：如果路径本身带线条宽度（lineWidth），而你又用了 fill()，那么描边中心线会落在填充区域边界上——一半在线内、一半在线外。视觉上圆看起来“偏粗”或“不对齐”。
- 要清晰描边+填充，推荐先
stroke()再fill()，并确保lineWidth较小（如 1~2） - 若需描边完全在填充外部，得手动偏移路径，或用两次
arc（一大一小）模拟 -
fillRule参数（如"evenodd"）在复杂路径中有用，但矩形和单圆无需设置，默认"nonzero"即可
Canvas 画基础图形看着简单，真正卡住人的往往是状态管理（beginPath、样式复用）、单位混淆（弧度/像素/CSS）、以及渲染机制（像素密度、重绘时机）。动手前多看两眼 MDN 上 arc 和 fillRect 的参数说明，比调十分钟颜色值更省时间。
