canvas fillstyle 设为线性渐变必须用 ctx.createlineargradient() 创建渐变对象并调用 addcolorstop() 添加至少两个色标（offset 为 0–1 的数字），再赋值给 fillstyle 后调用 fillrect() 等绘图方法；坐标参数非百分比，起点终点不可重合，offset 乱序虽可渲染但应保持递增。
canvas fillStyle 怎么设成线性渐变
必须用 ctx.createLinearGradient() 创建渐变对象，再赋给 fillStyle——纯色字符串、数组、逗号分隔的色值（如 "#f00,#00f"）全无效，浏览器会直接当非法值处理成黑色。
关键步骤只有三步：创建渐变轴线 → 添加色标 → 赋值并绘图。漏掉任何一步，都看不到过渡效果。
-
createLinearGradient(x0, y0, x1, y1)的四个参数是坐标点，不是比例或百分比；起点和终点可以落在画布外，但不能重合（x0===x1 && y0===y1会导致退化为单色） - 至少调用两次
addColorStop()，否则渐变不生效 -
fillStyle必须在调用fillRect()、fill()等绘图方法前设置
addColorStop() 的 offset 参数为什么总出错
常见错误是传入字符串（如 "50%" 或 "0.5"），但实际只接受 0–1 范围内的数字类型。写成 "0.5" 会被静默转为 0，导致颜色全部堆在起点。
另外，offset 不要求严格递增，但浏览器按数值升序插值；如果乱序（比如先加 1 再加 0），仍能渲染，但逻辑难维护。
- 合法：
grad.addColorStop(0, "red")、grad.addColorStop(0.75, "rgba(0,100,255,0.8)") - 非法：
grad.addColorStop("50%", "blue")、grad.addColorStop(1.2, "white")（超出 [0,1] 范围） - 危险：
grad.addColorStop(0, "black"); grad.addColorStop(0, "white")（两个 stop 在同一位置，后一个覆盖前一个）
渐变方向怎么控制：水平/垂直/对角
方向完全由 createLinearGradient(x0, y0, x1, y1) 的两点决定，跟图形大小无关。渐变轴线本身会被自动拉伸到所绘图形的 bounding box 上。
- 从左到右（水平）：
ctx.createLinearGradient(0, 0, canvas.width, 0) - 从上到下（垂直）：
ctx.createLinearGradient(0, 0, 0, canvas.height) - 从左上到右下（对角）：
ctx.createLinearGradient(0, 0, canvas.width, canvas.height) - 想让渐变“居中发散”，别用 (0,0) 到 (w,h)，改用
(canvas.width/2, 0, canvas.width/2, canvas.height)更可控
注意：如果图形比渐变轴线短，渐变会压缩；如果更长，则超出部分以最近色标颜色平铺延伸（不是重复，也不是透明）。
为什么矩形填了渐变却只显示一种颜色
最可能的原因是：渐变轴线太短，或者色标 offset 全设成了相同值（比如都写 0），又或者忘了调用 fillRect() 之类绘图方法。
- 检查是否漏了
grad.addColorStop()—— 即使写了两行，也可能因为变量名拼错（如gradiant）导致调用对象不对 - 确认
fillStyle赋值发生在绘图调用之前；如果先fillRect()再设fillStyle，那这次填充已经完成了 - 用
console.log(grad)查看渐变对象是否存在，以及addColorStop是否真被调用（DevTools 中展开看stops数组） - 临时把色标改成高对比色（如
red和cyan），排除颜色本身不可见的问题
真正容易被忽略的是：渐变对象一旦创建并赋值给 fillStyle，它就绑定到当前绘图上下文的状态里；后续如果不重新赋值，所有 fill 操作都会沿用它——这既是便利，也是调试时的干扰源。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
