Canvas图像缩放是否发虚取决于imageSmoothingEnabled设置及配套措施：需在drawImage前设为false并补全兼容前缀、加CSS image-rendering: pixelated，且异步图片须在onload后设置；设为true时可用imageSmoothingQuality='high'提升细节，但需兼顾性能与源图分辨率。
Canvas 图像缩放是否发虚、糊边或失真，关键就看 imageSmoothingEnabled 这个属性设没设对——它不是“开了就高清”，也不是“关了就一定锐利”，而是要和绘制时机、CSS 渲染策略、甚至浏览器行为配合起来用。
它管什么、不管什么
这个布尔属性只影响 drawImage() 等图像绘制操作的缩放插值方式，对线条（lineTo）、文字（fillText）、路径（arc）完全无效。也就是说，你调大 canvas 的 CSS width/height 或用 transform 缩放整个画布，它不起作用——那是浏览器渲染层的事，得靠 CSS 的 image-rendering 控制。
像素风必须关平滑：false 怎么设才生效
想让 16×16 的精灵图放大后保持硬边方块感，光写 ctx.imageSmoothingEnabled = false 不够：
- 必须在
drawImage()调用前设置，且每次绘制前都可重设（不是一次初始化就一劳永逸） - 要补全兼容前缀：
ctx.mozImageSmoothingEnabled = false、ctx.webkitImageSmoothingEnabled = false、ctx.msImageSmoothingEnabled = false - 必须同步给
<canvas>元素加 CSS：image-rendering: pixelated（注意不是给<img>加） - 离屏 canvas（比如
document.createElement('canvas')）也要单独设置其上下文，主 canvas 的设置不会继承过去
照片/图标需要更柔顺：true + quality 提升细节
默认 true 已启用基础抗锯齿，但质量偏低。可进一步提升视觉效果：
-
ctx.imageSmoothingQuality = 'high'在 Chrome/Firefox 有效，Safari 支持有限 - 高画质会轻微拖慢帧率，尤其在频繁 drawImage + 变换的动画中，建议先测性能
- 低分辨率源图（如 50×50）再调 high 也难救，优先换高清图源
- 此时 CSS 可省略
image-rendering，或设为auto，让浏览器按需处理
常见失效原因不是代码写错
很多“设了没反应”其实是执行时机或上下文出问题：
- 图片是异步加载的（
img.src = url），必须等img.onload触发后再设置上下文属性 - 在 WebGL 混合项目里，2D 上下文可能被意外重置，建议封装统一初始化函数
- 动态在同一个 canvas 上来回切换
true/false，容易导致渲染不一致或闪烁，应按用途分 canvas 或提前规划绘制逻辑
