最直接改canvas填充色是赋值fillStyle，它影响后续fill()、fillRect()、fillText()；支持十六进制、RGB、HSL、transparent及CanvasGradient/CanvasPattern；strokeStyle独立控制描边色；fillStyle设后持续生效，需手动重置。
canvas fillStyle 改颜色最直接的方式
改 fillStyle 就行，它控制所有后续 fill()、fillRect()、fillText() 的填充色。不是 CSS 属性，不能用 class 或 style 设置。
-
ctx.fillStyle = "#ff6b6b"（十六进制） -
ctx.fillStyle = "rgb(255, 107, 107)"（RGB 字符串） -
ctx.fillStyle = "hsl(0, 50%, 60%)"（HSL 也支持） -
ctx.fillStyle = "transparent"有效，但fill()不会显示；想“擦除”得用clearRect()
strokeStyle 和 fillStyle 是独立的
描边和填充颜色互不影响，初学者常以为设了 fillStyle 就自动影响 stroke()，其实不会。
- 描边用
strokeStyle，比如ctx.strokeStyle = "blue" - 同一个图形可以填红边蓝：
ctx.fillStyle = "red"; ctx.strokeStyle = "blue"; ctx.fillRect(10, 10, 100, 100); ctx.strokeRect(10, 10, 100, 100); - 漏设
strokeStyle时默认是"#000"，容易误以为“没生效”，其实是黑边太淡没注意
渐变和图案填充要提前创建再赋值
fillStyle 不只接受颜色字符串，还能接 CanvasGradient 或 CanvasPattern，但必须先调用 createLinearGradient() 等函数生成对象。
- 错：直接
ctx.fillStyle = ctx.createLinearGradient(...)—— 没问题，但漏了addColorStop() - 对：先
const grad = ctx.createLinearGradient(0,0,100,100); grad.addColorStop(0, "yellow"); grad.addColorStop(1, "red"); ctx.fillStyle = grad; - 常见坑：在循环里反复创建新渐变却没复用，性能掉得快；同一渐变对象可多次赋给
fillStyle
fillStyle 设定后不会自动重置
canvas 没有“样式栈”概念，fillStyle 一旦改了，就一直生效，直到你再改它。不像 SVG 那样靠父元素继承。
立即学习“前端免费学习笔记（深入）”；
- 画多个不同颜色矩形时，别忘了每次画前重新设
fillStyle - 如果封装绘图函数，建议把颜色作为参数传入，而不是依赖外部状态
- 临时保存/恢复？可以用
ctx.save()+ctx.restore()，但它不保存fillStyle—— 实际上它保存的是整个绘图状态，包括fillStyle，只是很多人没意识到这点
fillStyle 可能让后面十行代码都画错色，而且很难一眼定位。 
