Canvas离屏渲染不支持直接应用CSS样式，因其无DOM和CSSOM；需手动读取计算样式并转换为Canvas可识别参数，尤其注意字体加载与状态同步。
Canvas 离屏渲染本身不支持直接引入或应用外部 CSS 样式——这不是限制，而是底层机制决定的：离屏 Canvas 是纯位图绘制环境，没有 DOM、没有样式计算、没有 CSSOM。所谓“引入 CSS”，实际是开发者在混淆两个完全不同的渲染路径。
为什么 Canvas.getContext('2d') 无法读取 CSS 类或 style 属性
Canvas 2D 上下文（CanvasRenderingContext2D）只认显式设置的绘图属性：ctx.fillStyle、ctx.font、ctx.lineWidth 等。它不会解析元素上的 class 或内联 style，更不会触发浏览器的样式计算流程。
- DOM 元素的
getComputedStyle(el)返回的值，不能直接喂给ctx——比如color值可能带单位或函数（rgb(255,0,0)可用，var(--primary)不可用） -
ctx.font虽然语法类似 CSS，但仅接受字符串字面量；它不解析font-family: 'Inter', sans-serif中的备选字体链，也不加载未就绪的 web font - 离屏 Canvas 更进一步：它甚至不挂载到 DOM，
getComputedStyle对它返回空对象或默认值
如何把 CSS 样式“映射”到 Canvas 绘制逻辑中
真正可行的做法，是**手动桥接**：从真实 DOM 元素读取计算后的样式值，再转换为 Canvas 可识别的参数。关键在时机和转换规则：
- 必须等目标元素已渲染且字体已加载完成（尤其对
@font-face），否则getComputedStyle返回回退字体 - 颜色值需归一化：
rgb(255, 0, 0)、#ff0000、red都可直接赋给ctx.fillStyle；但hsla(0,100%,50%,0.5)需用hslaToRgba()转换 - 字体大小单位要转为像素：
1.2em或medium必须结合父元素fontSize手动计算，推荐统一用px声明 CSS - 行高、字间距、文本对齐等无直接对应项，需靠
ctx.textBaseline+ctx.textAlign+ 手动偏移模拟
示例：从 DOM 同步字体与颜色
const el = document.querySelector('.chart-label');
const style = getComputedStyle(el);
ctx.font = `${style.fontSize} '${style.fontFamily.split(',')[0].trim().replace(/^['"]|['"]$/g, '')}`; // 去引号、取首选字体
ctx.fillStyle = style.color;
ctx.fillText('Hello', x, y);
离屏渲染中加载 web font 的唯一可靠方式
离屏 Canvas 不触发字体加载，所以不能依赖 document.fonts.load() 后立刻绘图——必须确保字体资源已进入 document.fonts 的 loaded 状态，并且 Canvas 已知该字体名（注意引号包裹）：
- 用
document.fonts.load('400 16px "Inter"')显式请求，返回 Promise - 加载成功后，
ctx.font才能安全设为"16px 'Inter'"（单引号包裹字体名） - 若字体名含空格但未加引号（如
"16px Inter"），Canvas 会静默降级到serif - 移动端需额外检测
navigator.userAgent，iOS Safari 对document.fonts支持较晚，fallback 用setTimeout轮询ctx.measureText宽度是否突变
离屏渲染的“样式同步”本质是状态镜像，不是样式继承。最容易被忽略的是：字体加载完成 ≠ 字体可被 Canvas 使用——中间差一个“字体注册到渲染上下文”的隐式过程，而这个过程只在你第一次用该字体调用 ctx.font = ... 时触发，且不可预测延迟。真正在意视觉一致性的场景，务必把字体加载、Canvas 初始化、首帧绘制串成 Promise 链。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
