会卡顿，因matchmedia回调可能触发过早、频繁，导致同步渲染阻塞主线程；应结合requestanimationframe、防抖、主题配置抽离、初始化检查及颜色格式统一来优化。
matchMedia 回调里直接重绘 Canvas 会卡顿吗
会，而且非常容易卡。因为 matchMedia 的回调（尤其是监听 (prefers-color-scheme)）可能在布局计算未完成时就触发，此时若立刻调用 canvas.getContext('2d').clearRect() + 大量绘图指令，会强制同步渲染，阻塞主线程。更糟的是，系统可能在短时间内连续触发多次回调（比如从深色切回浅色再切回去），导致重绘队列堆积。
实操建议：
- 用
requestAnimationFrame包裹重绘逻辑，确保只在下一帧执行，避免 layout thrashing - 加防抖：用
setTimeout+ 清除机制，把连续回调合并为一次更新（50ms 足够覆盖绝大多数系统切换节奏） - 不要在回调里重新生成路径或解析颜色字符串——提前缓存好深/浅两套
CanvasGradient或CanvasPattern
如何让 Canvas 绘制逻辑感知主题而不用重写所有 drawXXX 函数
核心是把「颜色」和「样式」从硬编码中抽离，变成可注入的配置对象。不是每个 fillStyle 都写成 '#1a1a1a'，而是统一走一个主题访问器。
实操建议：
- 定义主题映射表，例如：
const themeColors = { 'light': { bg: '#ffffff', text: '#333333', accent: '#007acc' }, 'dark': { bg: '#121212', text: '#e0e0e0', accent: '#4dabf7' } }; - 在 Canvas 绘图前，根据当前
matchMedia结果读取对应主题：const currentTheme = prefersDark.matches ? 'dark' : 'light'; - 所有绘图操作都通过封装函数调用：
ctx.fillStyle = themeColors[currentTheme].accent;，而不是散落在各处的字面量
监听 prefers-color-scheme 时 matchMedia 返回的 matches 值没变，但 UI 没更新
常见于页面初始化后才挂载监听器，错过了初始状态；或者回调函数里用了闭包捕获了旧的 currentTheme 变量，导致后续调用始终用错值。
实操建议：
- 创建
matchMedia实例后，**立刻检查一次.matches**，手动触发首次更新：const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)'); updateCanvasTheme(mediaQuery.matches); // 初始化 mediaQuery.addEventListener('change', e => updateCanvasTheme(e.matches)); - 确保
updateCanvasTheme是纯函数，不依赖外部可变状态；如果必须用变量，用let currentTheme并在每次回调中显式赋值 - 注意 Safari 14–15 对
addEventListener支持不全，降级用mediaQuery.addListener（已废弃但兼容性更好）
Canvas 内部文字、阴影、渐变在主题切换后模糊或偏色
这是因为 fillStyle、shadowColor、createLinearGradient 等 API 对颜色格式敏感，而不同主题下 RGB 值变化可能让抗锯齿策略失效，或让 CSS 颜色关键字（如 'CanvasText'）在深色模式下解析出意外灰度。
实操建议：
- 统一用十六进制或
rgb(r, g, b)格式声明颜色，避开系统语义色（'ButtonText'等）——它们在 Canvas 中行为不一致且不可靠 - 切换主题时重置
ctx.shadowColor和ctx.globalCompositeOperation，防止旧混合模式残留影响新颜色渲染 - 对文字使用
ctx.textRendering = 'optimizeLegibility';，并在主题变更后重新设置font属性（某些字体在不同背景对比度下渲染引擎会启用不同 hinting）
clearRect 或一次 shadowColor 重置，UI 就会留下上个主题的残影。
