会卡顿，因matchMedia回调可能触发过早、频繁，导致同步渲染阻塞主线程；应结合requestAnimationFrame、防抖、主题配置抽离、初始化检查及颜色格式统一来优化。

matchMedia 回调里直接重绘 Canvas 会卡顿吗

会，而且非常容易卡。因为 matchMedia 的回调（尤其是监听 (prefers-color-scheme)）可能在布局计算未完成时就触发，此时若立刻调用 canvas.getContext('2d').clearRect() + 大量绘图指令，会强制同步渲染，阻塞主线程。更糟的是，系统可能在短时间内连续触发多次回调（比如从深色切回浅色再切回去），导致重绘队列堆积。

实操建议：

Canvas 内容工厂（网格生成→多页 PDF→SVG 精准复刻）

用户要生成可打印的中文字帖/练习纸、导出多页 A4 PDF 报告，或把 SVG 设计稿零误差还原到 Canvas 时使用。本技能是「Canvas 内容工厂闭环」的总控，编排：网格渲染引擎(13 种教育网格+拼音标注) → 多页 PDF 导出(A4 合成) → SVG 精准复刻(坐标误差<0.001px)。触发词：生成字帖、练习纸、导出 PDF、SVG 转 Canvas、印刷级还原、A4 报告、米字格田字格。

下载

• 用 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）

主题切换本身不难，难的是 Canvas 这种低阶绘制环境没有自动响应式机制——你得亲手把每一种视觉属性都变成“可交换模块”，还要扛住频繁触发、跨浏览器差异、以及渲染管线本身的异步特性。漏掉一次 clearRect 或一次 shadowColor 重置，UI 就会留下上个主题的残影。