canvas fillstyle仅接受纯色字符串或渐变对象，线性/径向渐变需严格按三步创建并赋值后调用fill()等方法才生效，坐标基于canvas.width/height且不随css缩放变化。
Canvas 里填颜色，不能靠写 "#f00,#00f" 这种逗号分隔的字符串——浏览器会直接当非法值，悄悄换成黑色。真正起作用的只有两种：纯色字符串（如 "red" 或 "rgba(255,0,0,0.8)"），或由 createLinearGradient() 或 createRadialGradient() 创建的渐变对象。
fillStyle 只接受合法颜色值
fillStyle 是个“开关式”属性：它要么是 CSS 颜色字符串，要么是渐变/图案对象，没有中间态。常见误区包括：
- 把
"#ff0000,#0000ff"当成渐变写进fillStyle→ 实际被忽略，填充为默认黑 - 传入数组、对象或 null → 同样退为黑色，无报错提示
- 用
canvas.clientWidth或 CSS 宽高算坐标 → 绘图坐标系只认canvas.width和canvas.height
线性渐变三步不可少
要画出过渡效果，必须严格走完这三步，缺一不可：
- 调用
ctx.createLinearGradient(x0, y0, x1, y1)创建渐变轴线（四个参数是像素坐标，不是百分比；起点终点不能重合） - 至少两次
addColorStop(offset, color)，offset必须是 0–1 的数字（比如0.3，不能写"30%"） - 把生成的渐变对象赋给
fillStyle，再执行fillRect()或fill()
径向渐变要注意半径与圆心
径向渐变用 createRadialGradient(x0, y0, r0, x1, y1, r1)，参数顺序容易搞错：
- 前三个是“内圆”：圆心
(x0, y0)+ 半径r0（通常设为0） - 后三个是“外圆”：圆心
(x1, y1)+ 半径r1（必须大于r0，否则无效） -
addColorStop(0, ...)对应内圆边缘，addColorStop(1, ...)对应外圆边缘，不是像素距离 - 所有坐标都以 canvas 左上角为原点，不随 CSS
transform或缩放自动适配
绘图时机决定效果是否可见
设置了 fillStyle = gradient 不等于立刻渲染。关键在后续动作：
- 必须紧接着调用
fillRect()、fill()或stroke()才能生效 - 如果中间穿插了
beginPath()但没重新定义路径，fill()可能什么也不画 - 渐变对象创建后绑定的是当时 canvas 的尺寸；之后改
width/height属性，旧渐变不会自动重算
