createLinearGradient 定义渐变轴线而非设置颜色，addColorStop 才决定过渡且至少需两次调用；坐标以 canvas 左上角为原点，需手动对齐图形位置；offset 必须为 0–1 小数，渐变对象赋给 fillStyle 后持续生效。
createLinearGradient 不是“设置渐变颜色”的方法，它只定义一条轴线；真正决定颜色过渡的是 addColorStop 调用，且必须至少两次，否则渲染为空或退为黑色。
参数是画布坐标，不是图形相对位置
传入的 (x0, y0, x1, y1) 始终以 canvas 左上角为原点，和你要画的矩形、圆在哪毫无关系。比如你画一个 fillRect(100, 50, 200, 100)，但写 createLinearGradient(0, 0, 0, 100)，渐变仍是从画布顶边开始向下延伸——不是从矩形顶边开始。
- 想让渐变“贴着图形走”，得手动把图形坐标代入：比如矩形左上是
(100, 50)，宽高(200, 100)，垂直渐变就该用createLinearGradient(100, 50, 100, 150) - 起点和终点重合（如
(50,50,50,50)）会导致渐变失效，浏览器按单色处理 - 点可以落在 canvas 外（如
(-50, -50, 500, 500)），只要轴线方向对，渐变仍有效
offset 必须是 0–1 的小数，不是像素也不是百分比字符串
addColorStop(offset, color) 的第一个参数 offset 是归一化值：0 表示渐变轴线起点，1 表示终点。写成 "50%"、50 或 -0.1 都会直接抛 IndexSizeError: The index is not in the allowed range.
- 两个色标就用
0和1最稳，别绕弯 - 加中间色用
0.5，不是50也不是"0.5px" - 重复
offset（如两次0.3）不会报错，但浏览器通常只取最后一次调用的颜色
fillStyle 赋值时机和复用陷阱
渐变对象赋给 fillStyle 后，会一直生效，直到你再次赋值——哪怕中间画了别的图形、调用了 beginPath() 或 stroke()。
- 常见误操作：
ctx.fillStyle = grad; ctx.fillRect(...); ctx.beginPath(); ctx.arc(...); ctx.fill();→ 圆也会被同一个渐变填充 - 安全做法：每次绘制前显式设置
fillStyle，尤其在混合纯色与渐变时 - 调试建议：临时把
fillStyle改成"red"，确认是渐变逻辑问题，还是路径/顺序/坐标搞错了
最易被忽略的一点：渐变轴线长度不影响颜色分布比例，只影响方向；但过短的轴线（比如 (0,0,1,1)）在高缩放或高 DPI 下可能因浮点精度导致色标“挤在一起”，视觉上像单色——这种时候拉长轴线（如 (0,0,100,100)）反而更稳。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
