image-rendering 不会导致像素画模糊，它恰恰是用来解决模糊的——但必须作用于 元素本身，配合 srcset 多分辨率资源、整数缩放及 DPR 适配，否则无效；给 设置该样式完全无用。
直接说结论：image-rendering 不会导致像素画模糊，它恰恰是用来解决模糊的——但必须用对地方、配对条件，否则就“看似生效、实则无效”。
为什么给 img 元素设 image-rendering: pixelated 没用
常见错误是把样式加在 <img src="sprite.png"> 上，尤其在 Canvas 游戏里还试图写 this.texture.style.imageRendering = "pixelated"。这完全无效，因为：
-
image-rendering只影响「该元素作为最终渲染目标时」的缩放行为，<img>是图像源，不是显示容器； - Canvas 绘图时，
ctx.drawImage()读取的是原始像素数据，不经过<img>的 CSS 渲染管线； - 即使
<img>显示清晰了，Canvas 里 draw 出来的图依然模糊——两者渲染路径完全隔离。
真正起效的位置：必须作用于 <canvas></canvas> 元素本身
Canvas 是最终像素输出容器，image-rendering 必须挂在这里，才能控制 drawImage() 缩放时的插值算法：
canvas {
image-rendering: pixelated;
image-rendering: -moz-crisp-edges;
image-rendering: -o-crisp-edges;
image-rendering: -webkit-optimize-contrast;
}
- 现代浏览器（Chrome 89+、Firefox 78+、Safari 15.4+）认
pixelated，它是标准值； - 旧版兼容项不能省，尤其
-webkit-optimize-contrast在 Safari 14 及更早版本中仍是唯一有效选项； - 不要用 JS 动态设置
canvas.style.imageRendering，CSS 声明更稳定，且无需等待onload或 DOM 就绪时机。
ctx.imageSmoothingEnabled = false 是补充，不是替代
这个 Canvas API 和 CSS image-rendering 协同工作，但作用层级不同：
-
ctx.imageSmoothingEnabled = false关闭的是 Canvas 2D 上下文内部的缩放插值，仅影响drawImage()； - 它不控制 canvas 元素自身被 CSS 缩放（比如
canvas { width: 640px; height: 480px; }）时的渲染； - 单独用它，在某些 Chrome 版本或高 DPR 屏上可能失效；和
pixelated同时启用，效果最稳； - 务必在获取 context 后立即设置：
const ctx = canvas.getContext('2d'); ctx.imageSmoothingEnabled = false;。
移动端和 Retina 屏发虚？pixelated 不是万能药
如果在 iPhone 或 MacBook 上仍看到模糊，大概率不是 image-rendering 失效，而是设备像素比（DPR）导致的底层缩放：
- 浏览器先按物理像素（比如 2x）渲染 canvas，再缩放到 CSS 像素尺寸，此时插值发生在合成层，CSS 已无法干预；
- 解决方案不是调样式，而是改资源：提供 2x 原图（如 64×64），用
<img srcset="sprite@2x.png 2x">或 CanvascreateImageBitmap()加载匹配 DPR 的版本； - 避免用 CSS 强制压缩高清图（如
width: 32px; height: 32px显示 64×64 图），这等于主动触发降采样； -
<meta name="viewport">中不要设initial-scale非 1 值，否则可能引入额外缩放层。
真正容易被忽略的点是：像素画清晰与否，从来不只是一个 CSS 属性的事——它卡在资源尺寸、canvas 像素比、DPR 适配、绘制逻辑四者的交界处。少一环，pixelated 就只是个摆设。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
