moz-opaque 是 Firefox 早期非标准属性，用于声明 canvas 完全不透明以提升性能，但自 Firefox 90+ 起已被忽略，Chrome/Safari/Edge 从未支持，现已完全失效，应删除。
moz-opaque 是什么，现在还管用吗
moz-opaque 是 Firefox 早期为 <canvas> 元素引入的一个非标准布尔属性，作用是向浏览器声明：这个 canvas 内容**完全不透明**（即 alpha 值恒为 1）。一旦设置，Firefox 可跳过合成阶段的 alpha 混合计算，从而在某些场景下提升绘图性能。
但它从来不是 Web 标准，Chrome、Safari、Edge 都不识别 moz-opaque；Firefox 自 2021 年起也逐步弱化其影响，现代版本（v90+）已基本忽略该属性——即使写了，也不会触发额外优化。
所以结论很直接：现在写 moz-opaque 已无实际收益，且可能误导后续维护者以为它还在生效。
为什么有人还在用 moz-opaque
老项目里常见这种写法，比如：<canvas id="chart" width="600" height="400" moz-opaque></canvas>。原因通常是：
- 复制了多年前的“性能优化指南”，没跟进浏览器实现变化
- 误以为它是通用的 canvas 透明度控制开关（其实它不控制渲染结果，只提示浏览器）
- 和
alpha: false混淆——后者才是getContext('2d')的合法参数，真正禁用 alpha 通道
注意：moz-opaque 不会影响 canvas 是否显示透明背景，也不改变 ctx.fillStyle 或 ctx.globalAlpha 的行为；它只是个废弃的 hint。
用户要生成可打印的中文字帖/练习纸、导出多页 A4 PDF 报告，或把 SVG 设计稿零误差还原到 Canvas 时使用。本技能是「Canvas 内容工厂闭环」的总控，编排：网格渲染引擎(13 种教育网格+拼音标注) → 多页 PDF 导出(A4 合成) → SVG 精准复刻(坐标误差<0.001px)。触发词：生成字帖、练习纸、导出 PDF、SVG 转 Canvas、印刷级还原、A4 报告、米字格田字格。
真正影响 canvas 性能与清晰度的关键点
比起纠结 moz-opaque，更值得检查这几处：
-
画布物理尺寸 vs CSS 尺寸不一致：用 CSS 缩放
<canvas width="300" height="150">到 600×300，会导致像素拉伸模糊；应直接设width和height属性，或按设备像素比（window.devicePixelRatio）动态重置 -
2D 上下文创建时启用了 alpha：如果确定不需要透明度，用
canvas.getContext('2d', { alpha: false })，这会禁用 alpha 通道，减少内存占用和合成开销（现代浏览器都支持） -
未处理高 DPI 屏幕：在 Retina 屏上，
canvas.width仍按 CSS 像素设为 300，但实际需要 600 像素宽才能清晰；必须手动读取devicePixelRatio并缩放坐标系
这些才是真正影响绘制质量与性能的可控变量，moz-opaque 早已不在其中。
要不要删掉已有的 moz-opaque
可以删，而且建议删。理由很实在：
- 它不报错，但也没任何作用——纯属冗余 HTML 属性
- 团队新人看到可能花时间查文档，误以为是某种兼容性必需项
- 部分 Linter（如 axe、HTMLHint）会标记非标准属性为 warning
- 若未来某天 Firefox 彻底移除对该属性的解析，留着反而增加不确定性
删掉后，只要确保 getContext 调用逻辑正确、画布尺寸匹配设备像素比，视觉和性能都不会有变化——这才是干净、可维护的做法。
