imageSmoothingEnabled是Canvas 2D中控制图像缩放抗锯齿的核心布尔属性，仅对drawImage()等图像绘制生效，对路径和文本无效；设为false可保留像素艺术的锐利边缘，需配合CSS image-rendering: pixelated及浏览器前缀确保兼容性。
imageSmoothingEnabled 是 Canvas 2D 上下文里最直接、最常用的抗锯齿开关，但它只对 drawImage() 等图像绘制操作生效，对路径（lineTo、arc）或文本渲染完全无效。
什么时候必须设为 false？
做像素风游戏、复古 UI 或需要精确保留原始像素块的场景。比如把一张 16×16 的精灵图放大到 64×64 显示，若不关掉平滑，边缘会发虚、颜色渗出；设为 false 后，每个原始像素被整数倍复制，呈现干净的“方块感”。
- 仅靠 JS 设置不够：必须同时加 CSS
image-rendering: pixelated到<canvas>元素上，否则部分浏览器（尤其是 Safari）仍可能插值 - 兼容写法要补全前缀：
ctx.imageSmoothingEnabled = false，同时设置ctx.mozImageSmoothingEnabled = false、ctx.webkitImageSmoothingEnabled = false - 注意：该属性在 canvas 缩放（CSS transform）时不起作用——那是渲染层行为，得靠 CSS 控制
什么时候建议设为 true 并调高 quality？
展示照片、UI 图标、带旋转/倾斜的贴图等需要视觉柔顺的场景。默认 true 已启用基础抗锯齿，但质量常偏低；配合 imageSmoothingQuality 可明显改善：
-
ctx.imageSmoothingQuality = 'high'在 Chrome/Firefox 有效，Safari 支持有限 - 高画质代价是轻微性能下降，尤其在频繁
drawImage()+ 变换的动画中，可先测帧率 - 如果图片本身分辨率低（如 50×50），再设 high 也难救，优先换高清源图
为什么设置了 imageSmoothingEnabled 却没效果？
常见失效原因不是代码写错，而是执行时机或上下文不对：
立即学习“前端免费学习笔记（深入）”；
- 必须在调用
drawImage()前设置，且每次绘制前都可重设（它不是只读初始配置） - 离屏 canvas（
document.createElement('canvas')）也要单独设置其上下文的imageSmoothingEnabled，主 canvas 的设置不会继承过去 - 使用
createObjectURL()或URL.createObjectURL(blob)加载的图片，需等img.onload触发后再设置上下文属性，否则可能因异步时机错过 - 某些 WebGL 混合项目里，Canvas 2D 上下文可能被意外重置，建议封装一个
setupSmoothing(ctx, enabled, quality)函数统一初始化
真正麻烦的不是开或关，而是混合场景：同一 canvas 既要画锐利像素图，又要叠一层模糊阴影。这时得拆成两个 canvas 层叠，分别控制各自的 imageSmoothingEnabled 和 CSS image-rendering，不然总有一方妥协。
