Canvas仅支持W3C标准颜色名、十六进制和rgb()/rgba()字符串，不解析CSS变量、函数或系统色；需用getComputedStyle获取计算值并缓存，注意DPR适配与sRGB色彩空间差异。
Canvas只认W3C标准颜色名，不解析CSS变量或函数色值
Canvas 2D上下文根本不会读取CSS样式表，ctx.fillStyle = "--primary-color" 或 ctx.fillStyle = "hsl(200, 50%, 60%)" 这类写法会静默失败——不是报错，而是直接渲染为透明或黑色。它只接受三类输入："red" 这样的140+个W3C标准颜色名（大小写敏感，"LightGreen" ✅，"lightgreen" ❌），十六进制（"#ff6347"），以及逗号分隔的rgb()/rgba()字符串。
常见错误现象：
-
getComputedStyle(el).getPropertyValue("--accent")返回"rgba(100, 200, 255, 0.8)"，Canvas能用；但若返回"var(--base, #000)"或"color-mix(in srgb, red 50%, blue)"，就完全无效 - 在深色模式下从
:root读取的--text-primary若定义为CanvasText，Canvas里画出来可能是深灰或浅灰，且不随系统主题实时更新
实操建议：
- 必须先用
getComputedStyle拿到最终计算值，再赋给ctx.fillStyle - 封装工具函数时注意元素挂载状态：
function cssVarToColor(varName, el = document.documentElement) { return getComputedStyle(el).getPropertyValue(varName).trim(); } - 高频绘制（如
requestAnimationFrame）中缓存结果，避免反复调用getComputedStyle
rgba()字符串在Canvas中alpha行为与CSS不同
Canvas里的rgba(0, 0, 0, 0.5)控制的是“本次绘制操作的不透明度”，不是图层混合。连续两次用该值填充同一区域，颜色会叠加变暗；而CSS中两个半透div叠在一起，视觉上更接近一次合成。
立即学习“前端免费学习笔记（深入）”；
参数差异明显：
-
"rgba(255, 128, 0, 0.7)"✅ 兼容所有主流浏览器Canvas实现 -
"rgba(255 128 0 / 0.7)"❌ Safari旧版、部分安卓WebView不支持空格分隔语法 - alpha必须是0–1之间的小数，
"rgba(0,0,0,50%)"会直接失效，变成默认黑色
如果你从CSS变量里取到的是带alpha的rgba()字符串，Canvas可直接用；但别指望它和CSS渲染效果一致——这是底层绘图模型决定的，不是bug。
系统色（CanvasText、ButtonFace）在Canvas中不可靠
把ctx.fillStyle = "CanvasText" 当作跨平台文字色用，结果往往出人意料：Windows上可能是#333，macOS上却是#1e1e1e，而且深色模式切换时不会自动更新。Canvas API不监听系统主题变化，它只做一次静态解析。
使用场景受限：
- 仅适合绘制canvas内部原生UI控件（比如自研图表的坐标轴文字），且需主动监听
prefers-color-scheme并手动重设 - 绝不能用于和DOM元素对齐的颜色（例如canvas上画的按钮背景色要匹配
<button></button>），因为DOM用的是实时系统API，Canvas用的是快照值
实操建议：
- 用
@media (prefers-color-scheme: dark)配合CSS自定义属性预设两套RGB值，JS里读取getComputedStyle后传入Canvas - 需要与系统控件风格一致时，优先用CSS
appearance: button+border模拟，而不是试图在Canvas里复现ButtonFace
设备像素比（DPR）导致的“颜色变淡”错觉
很多人发现Canvas里设fillStyle = "white"，画出来的却比<div style="background:white">灰一层——这通常不是颜色本身问题，而是DPR适配缺失造成的抗锯齿模糊，让高对比边缘发虚，视觉上“变淡”。<p>关键点：</p>
<ul>
<li>Canvas的<code>width/height属性决定物理分辨率，style.width/style.height决定CSS占位尺寸；两者不按DPR缩放就会拉伸
ctx.lineWidth = 2有时“改善”了观感，本质是加粗掩盖了模糊，而非修复颜色真正解决要从分辨率入手：canvas.width = rect.width * dpr、canvas.height = rect.height * dpr、ctx.scale(dpr, dpr)。否则再准的颜色值，也会被糊掉。
最易被忽略的是：sRGB色彩空间声明和设备校准。即使代码全对，设计师用Display P3导出的图片、用户开了夜览模式、显示器未校准，都会让Canvas里"#ffffff"和CSS里"#ffffff"看起来不一样——这不是你能用代码修好的部分。
