canvas图形填充核心是fillstyle属性，它支持纯色和线性渐变；需注意其状态持久性、坐标系使用canvas.width/height、addcolorstop的offset必须为0-1数字且至少两个才有效。
Canvas 图形填充的核心在于 fillStyle 属性，它决定图形内部的视觉表现。它不仅能设为纯色，更能接受线性渐变对象——这是实现丰富背景、立体感和动态视觉效果的关键路径。
fillStyle 的基本用法与常见误区
fillStyle 是绘图上下文的状态属性，一旦赋值就会持续生效，直到被新值覆盖。它可以是 CSS 颜色字符串（如 '#ff6b35'、'rgb(255,107,53)'）、rgba 值，或渐变对象。
- 纯色赋值简单直接，但容易忽略：多次绘制不同颜色图形时，必须显式重设 fillStyle，否则全部沿用上一次值
- 误将字符串（如
'linear-gradient(...)'）或数组赋给 fillStyle —— 浏览器不会报错，而是静默转为黑色 - fillStyle 不会因调用 fillRect() 或 fill() 而自动重置，它只随你主动赋值改变
线性渐变的创建与坐标理解
线性渐变由 ctx.createLinearGradient(x0, y0, x1, y1) 创建，四个参数是画布内的绝对像素坐标，不是百分比，也不是 CSS 单位。
- 方向由起点 (x0,y0) 到终点 (x1,y1) 决定：水平渐变可设为
(0, 0, canvas.width, 0)；垂直渐变为(0, 0, 0, canvas.height) - 起点与终点重合（如 x0===x1 且 y0===y1）会导致渐变退化为单色，图形呈现均匀填充
- 务必使用
canvas.width和canvas.height作为基准，而非canvas.clientWidth或缩放后的尺寸，避免坐标系错位
addColorStop 的关键规则
向渐变对象添加颜色节点必须通过 grad.addColorStop(offset, color)，该方法对参数类型和范围极为敏感。
- offset 必须是 0 到 1 之间的数字（如 0.3、1），不能是字符串（
"0.3"）、百分比（"30%"）或越界值（1.5） - 多个 color stop 可叠加，顺序按 offset 从小到大自然过渡；相同 offset 的后设颜色会覆盖前设
- 至少需两个 color stop 才能形成有效渐变，仅一个时图形显示为该颜色的纯色填充
渐变复用与独立控制技巧
同一个渐变对象可被多个图形共用，但若需不同方向或配色，必须为每个图形单独创建并赋值。
- 在循环中绘制多个渐变图形时，应在每次迭代内新建渐变对象并重新赋给 fillStyle
- 例如：第一个矩形用从左到右渐变，第二个用从上到下渐变，就必须分别调用 createLinearGradient 并各自 addColorStop
- 避免在循环外一次性创建渐变后反复复用——除非所有图形确实需要完全一致的渐变效果
