本文详解如何通过 css 的 `image-rendering: pixelated` 属性，配合 canvas 的 `drawimage()` 方法，确保像素艺术资源在缩放时保持锐利、无模糊，适用于纯 js 开发的像素风游戏。
在基于 Canvas 开发像素风格游戏（如采矿模拟器）时，一个常见痛点是：即使使用 32×32 等小尺寸 PNG 资源，调用 ctx.drawImage(texture, x, y, width, height) 进行放大绘制后，图像仍出现明显模糊——这是浏览器默认启用双线性插值（antialiasing）所致。关键误区在于：image-rendering 必须作用于 。你在 this.texture.style.imageRendering = "pixelated" 中对 Image 实例设置样式，完全无效，因为该样式仅影响 标签的渲染行为，对 Canvas 绘图上下文无任何作用。
✅ 正确做法是：为
/* 推荐：全局启用，简洁可靠 */
canvas {
image-rendering: pixelated;
image-rendering: -moz-crisp-edges; /* Firefox 旧版兼容 */
image-rendering: -webkit-optimize-contrast; /* Safari 旧版兼容 */
image-rendering: crisp-edges; /* Chrome/Edge 旧版别名（已废弃但仍有支持） */
}⚠️ 注意事项：
- image-rendering: pixelated 是现代标准（Chrome 89+、Firefox 78+、Safari 15.4+），已覆盖绝大多数目标用户；
- 不需在 JavaScript 中动态操作 canvas.style（如 canvas.style.imageRendering = 'pixelated'），纯 CSS 更稳定且无需等待加载时机；
- 无需修改 Image 对象的任何属性或事件处理逻辑（如 onload 中设样式），可安全移除 this.texture.style.imageRendering = "pixelated" 相关代码；
- 若需支持极老浏览器（如 IE 或早期 Android WebView），可结合 ctx.imageSmoothingEnabled = false（但注意：它仅影响 drawImage 缩放，不控制 canvas 自身缩放；且 pixelated 已基本取代此 API）：
// 可选增强（与 CSS 同时使用更稳妥）
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
ctx.imageSmoothingEnabled = false; // 关闭 canvas 内部插值? 实际效果验证：当 drawImage 将 32×32 像素图放大至 40×40（或更大）时，每个原始像素将被完整复制为 1×1 或整数倍方块，杜绝半透明边缘，真正呈现“复古像素风”。
立即学习“前端免费学习笔记（深入）”；
总结：解决 Canvas 像素画模糊问题，核心是 CSS 驱动而非 JS 驱动。只需一行关键 CSS 规则作用于
class Ore {
constructor(name, /*...*/) {
// ...
this.texture = new Image();
this.texture.src = `assets/ores/${name}.png`;
// ✅ 移除 this.texture.style.imageRendering —— 完全无效
}
}搭配上述 CSS 后，render() 函数无需任何改动，即可获得锐利、一致、符合像素艺术审美的渲染结果。
