canvas颜色不匹配源于srgb色域与设备输出差异，需主动对齐读取、解析、赋值、渲染四环节，而非依赖自动适配；务必trim()css变量、统一rgba格式、匹配像素与css尺寸，并接受跨设备色差现实。
Canvas 本身没有“色彩模型”可配置，它只忠实地把输入的颜色值映射到当前渲染上下文的 sRGB 输出通道。所谓“匹配 UI 视觉风格”，本质是让 Canvas 绘制出的颜色，在人眼感知、设备输出、设计稿意图三个层面，和 CSS 控制的 DOM 元素看起来一致——这需要你主动对齐读取、解析、赋值、渲染四个环节，而不是指望 Canvas 自动适配。
用 getComputedStyle 读取 CSS 变量时必须 .trim()
直接 getComputedStyle(document.documentElement).getPropertyValue('--primary') 返回的字符串可能带首尾空格（如" #3b82f6 "）或换行符，Canvas 会静默忽略这种格式，ctx.fillStyle 回退为黑色。
- 务必加
.trim()：例如const color = getComputedStyle(root).getPropertyValue('--primary').trim() - 如果返回空字符串或
"var(--fallback)"，说明变量未定义或目标元素未挂载，Canvas 不会报错，但颜色失效 - 高频绘制中（如
requestAnimationFrame）禁止重复调用，应在主题切换或初始化时缓存一次
rgba() 字符串传给 ctx.fillStyle 的 alpha 行为与 CSS 不同
CSS 中两个 rgba(0,0,0,0.5) 层叠，视觉上是半透叠加；Canvas 中连续两次 fillRect 同一区域，alpha 是“覆盖强度”，结果会变暗，不是合成效果。
用户要生成可打印的中文字帖/练习纸、导出多页 A4 PDF 报告，或把 SVG 设计稿零误差还原到 Canvas 时使用。本技能是「Canvas 内容工厂闭环」的总控，编排：网格渲染引擎(13 种教育网格+拼音标注) → 多页 PDF 导出(A4 合成) → SVG 精准复刻(坐标误差<0.001px)。触发词：生成字帖、练习纸、导出 PDF、SVG 转 Canvas、印刷级还原、A4 报告、米字格田字格。
- 确保字符串格式兼容：用逗号分隔的
rgba(100, 150, 200, 0.6)✅；斜杠写法rgba(100 150 200 / 0.6)❌（Safari 15.6 以下不支持） - alpha 必须是小数，
rgba(0,0,0,50%)会被 Canvas 忽略，回退为黑色 - 若不确定输入格式，建议统一 fallback 到十六进制：
color || '#3b82f6'
Canvas 渲染受 devicePixelRatio 和尺寸缩放影响，间接改变颜色观感
当 canvas.width/canvas.height 与 canvas.style.width/canvas.style.height 不一致时，浏览器会拉伸位图缓冲区。抗锯齿算法混入额外像素，边缘颜色被柔化，导致“发灰”或“糊边”——这不是颜色值错了，而是采样变了。
- 保持 canvas 像素尺寸与 CSS 尺寸等比：例如 CSS 设
width: 450px; height: 300px，则 JS 中设canvas.width = 450 * window.devicePixelRatio，canvas.height = 300 * window.devicePixelRatio - 设置
ctx.scale(window.devicePixelRatio, window.devicePixelRatio)后，仍按逻辑坐标（如fillRect(0,0,100,100)）绘制，避免手动换算 - 不要依赖
backdrop-filter或透明叠加来“修色”，那是在掩盖底层尺寸失配问题
真正难的不是怎么把 CSS 颜色塞进 Canvas，而是 sRGB 色域、设备输出特性、以及 Canvas 位图叠加模型这三者之间天然存在不可消除的差异。哪怕数值完全一样，macOS Display P3 屏和 Windows sRGB 屏上看到的 #4A90E2 也不同——你得接受这个前提，再决定是做设备适配、降级处理，还是在设计阶段就约束色域范围。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
