RGB精准适配像素操作与程序化控制，HSLA语义直观利于主题切换与交互调色；Canvas中二者可按需混用，fillStyle/strokeStyle均原生支持。
RGB：精准、稳定、适合程序化控制
RGB 以红（R）、绿（G）、蓝（B）三通道数值（0–255）组合成色，在 Canvas 中通过 fillStyle 或 strokeStyle 直接使用字符串形式，例如 "rgb(255, 90, 45)" 表示橙红色。
它的核心优势在于：
- 数值直观，便于用变量或算法生成，比如循环绘制渐变色块时，可分别递增 R 和 G 值
- 与图像处理底层一致，配合
getImageData()读取/修改像素时无缝衔接 - 性能开销小，浏览器解析快，适合高频重绘场景（如动画、粒子系统）
注意：纯数字写法不支持透明度；如需半透明效果，必须改用 rgba() 形式，第四个参数为 alpha（0.0–1.0）。
HSLA：语义清晰、调色友好、适合交互设计
HSLA 把颜色拆解为色相（H，0–360°）、饱和度（S，0%–100%）、明度（L，0%–100%）和透明度（A，0–1）。例如 "hsla(180, 70%, 60%, 0.8)" 表示一个偏青的、中等饱和、较亮且略透明的色。
Canvas 内容工厂（网格生成→多页 PDF→SVG 精准复刻）
下载
用户要生成可打印的中文字帖/练习纸、导出多页 A4 PDF 报告，或把 SVG 设计稿零误差还原到 Canvas 时使用。本技能是「Canvas 内容工厂闭环」的总控，编排：网格渲染引擎(13 种教育网格+拼音标注) → 多页 PDF 导出(A4 合成) → SVG 精准复刻(坐标误差<0.001px)。触发词：生成字帖、练习纸、导出 PDF、SVG 转 Canvas、印刷级还原、A4 报告、米字格田字格。
它更适合以下情况：
- 设计类工具中实时调节颜色：用户拖动色相滑块，只需改 H 值，S/L 保持不变，颜色自然流转
- 统一主题配色：固定 H 和 S，仅调节 L 就能生成深浅一致的系列色（如按钮悬停态）
- 叠加图层时控制透明混合：A 值比 RGBA 的 alpha 更易理解，且与设计师使用的色板工具逻辑一致
注意：HSLA 不适用于像素级图像处理，因为其值不能直接映射到图像数据数组；若从 getImageData 获取像素再转 HSLA，需额外做色彩空间转换。
实际绘图中的搭配建议
多数 Canvas 应用并不需要在 RGB 和 HSLA 之间做非此即彼的选择，而是按用途分工：
- 填充大面积背景、绘制 UI 元素、响应用户调色器输入 → 优先用 HSLA，开发体验更顺
- 渲染动态图形、处理摄像头/画布截图、实现滤镜效果 → 用 RGB/RGBA，避免转换损耗
- 同一项目中混用完全可行：Canvas 对两种格式都原生支持，无需转换函数
例如，用 HSLA 绘制一个可调节的色盘（H 变化），再用 RGB 把用户选中的颜色实时填充到预览矩形中，两者协作自然流畅。
