Canvas与DOM颜色不一致的根本原因在于值传递链断裂：getComputedStyle读取的CSS变量需解析为具体颜色字面量（如"#3b82f6"）才能被ctx.fillStyle识别，直接赋"var(--primary)"会静默fallback为黑色；rgba()中alpha必须为小数且分隔符为逗号；系统色名不可靠，色空间（如display-p3 vs sRGB）和DPR缩放进一步加剧偏差，需主动监听主题变更并重绘。
Canvas 和 DOM 颜色不一致，不是颜色“错了”，而是你读的值、传的值、渲染的路径根本不在同一条链路上——getComputedStyle 拿到的不是 Canvas 能直接用的值，ctx.fillStyle 也不认 CSS 语法，更别说色空间、DPR、混合模式这些隐性干扰项。
为什么 ctx.fillStyle = "var(--primary)" 会静默变黑
Canvas 2D 上下文完全不解析 CSS 函数。写 "var(--primary)" 就等于传了个非法字符串，浏览器直接 fallback 到 #000000（或透明），图形可能直接消失。它只接受最终计算出的颜色字面量："#3b82f6"、"rgb(59, 130, 246)"、"rgba(59, 130, 246, 0.8)"（注意小数 alpha，且分隔符必须是逗号）。
-
getComputedStyle(document.documentElement).getPropertyValue("--primary")必须配合.trim()，否则空格会导致赋值失败（Safari 尤其敏感） - 若变量定义为
color-mix(in srgb, red 30%, blue)或oklch(60% 0.2 270)，返回的是原始函数字符串，Canvas 不识别，需 fallback 到 hex - 不要用
document.createElement("div")未挂载节点去读变量——getComputedStyle返回空或"var(--fallback)"
rgba() 字符串在 Canvas 中的 alpha 行为和 CSS 不同
从 CSS 变量里拿到的 "rgba(100, 150, 200, 0.6)" 可以直接赋给 ctx.fillStyle，但效果不对等：Canvas 的 alpha 控制的是本次绘制对底层像素的“覆盖强度”，连续两次 fillRect 同一区域会叠加变暗；而 CSS 中两个半透层叠是合成模型的结果。
- 确保 alpha 是小数格式：
"rgba(0,0,0,0.5)"✅，"rgba(0,0,0,50%)"❌（失效，fallback 黑色） - 新式写法如
"rgba(100 150 200 / 0.6)"在 Safari 15.6 以下、部分安卓 WebView 中不支持，别用 - 高频绘制（如
requestAnimationFrame）中避免每次都调用getComputedStyle，缓存解析结果
系统色名（如 "CanvasText"）在 Canvas 中不可靠
ctx.fillStyle = "CanvasText" 看似跨平台，实则行为分裂：Windows 下可能是 #333，macOS 深色模式下可能是 #e6e6e6，且切换主题后 Canvas 不会自动更新。它不响应 prefers-color-scheme，也不做色彩管理。
用户要生成可打印的中文字帖/练习纸、导出多页 A4 PDF 报告，或把 SVG 设计稿零误差还原到 Canvas 时使用。本技能是「Canvas 内容工厂闭环」的总控，编排：网格渲染引擎(13 种教育网格+拼音标注) → 多页 PDF 导出(A4 合成) → SVG 精准复刻(坐标误差<0.001px)。触发词：生成字帖、练习纸、导出 PDF、SVG 转 Canvas、印刷级还原、A4 报告、米字格田字格。
立即学习“前端免费学习笔记（深入）”；
- 别依赖系统色名做主题适配，改用明确的 CSS 变量（如
--text-primary） + 主动监听：window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", updateCanvasColors) - 深色模式下从
:root读取的变量只是静态快照，不是实时映射——主题切换后必须手动重绘，否则颜色卡住 - 真正麻烦的不是怎么取值，而是色空间差异：CSS 变量背后可能是
display-p3或oklab，Canvas 只认 sRGB，一旦涉及色域转换，结果就不可控
Canvas 尺寸缩放导致颜色“发灰”或边缘错位
当 canvas.width/canvas.height 和 canvas.style.width/canvas.style.height 不一致时，Canvas 会拉伸渲染缓冲区——这不仅让图形模糊，还会让抗锯齿混入额外像素，间接改变边缘颜色感知。同一 #4A90E2 在 macOS Display P3 屏上看起来就比 sRGB 屏偏暗。
- 用
canvas.getBoundingClientRect()取真实显示尺寸，别用offsetWidth（受父容器transform影响不准） - 设
canvas.width = rect.width * window.devicePixelRatio，再ctx.scale(dpr, dpr)，之后所有坐标仍按 CSS 像素写 - 检查开发者工具「Computed」面板确认最终生效色值，别只看「Styles」里写的那行——
backdrop-filter或color-scheme补偿也会影响视觉一致性
最常被忽略的一点：颜色同步不是单次读取就能搞定的事。它需要绑定主题变更事件、主动重绘、校准 DPR、过滤无效色值、并接受色空间无法完全对齐的事实。所谓“一致”，其实是你在三四个环节上反复对齐后的妥协结果。
