JavaScript Canvas设置image-rendering:pixelated后像素画仍模糊问题求助

• Canvas画布尺寸与CSS显示尺寸不匹配：Canvas存在两套独立的尺寸规则：标签自带的width/height属性控制画布实际的像素点阵数量，CSS设置的width/height控制画布在页面上的渲染显示尺寸。如果前者数值小于后者，浏览器会先将画布的低分辨率点阵拉伸到CSS指定的显示尺寸再应用渲染规则，即使开启image-rendering: pixelated，也会因为拉伸前的点阵精度不足出现模糊。你当前的代码仅在CSS中定义了256px×256px的显示尺寸，若未给Canvas标签显式设置width="256" height="256"，浏览器会使用默认的300px×150px画布尺寸，拉伸后自然会出现模糊问题。
• Canvas 2D上下文默认开启图像平滑：2D绘制上下文默认开启imageSmoothingEnabled属性，绘制缩放的图片时会自动做抗锯齿平滑处理，该操作在内容绘制阶段就已经完成，后续CSS的image-rendering规则仅能处理最终画布的渲染逻辑，无法将已经平滑模糊的内容还原为锐化的像素风格。
• 绘制参数存在亚像素值：如果代码中this.x、this.y、this.size的计算结果为非整数，带小数的绘制坐标会触发浏览器的亚像素渲染逻辑，也会导致像素画边缘模糊。

• 统一Canvas的实际尺寸与显示尺寸，给Canvas标签添加和CSS尺寸一致的width、height属性：

<canvas id="canvas" width="256" height="256"></canvas>

如果需要适配高DPI屏幕，可以将画布实际尺寸设置为显示尺寸乘以window.devicePixelRatio，再通过CSS缩放到对应显示尺寸即可。

• 关闭2D绘制上下文的图像平滑功能，在调用drawImage前添加以下兼容代码：

ctx.mozImageSmoothingEnabled = false;
ctx.webkitImageSmoothingEnabled = false;
ctx.msImageSmoothingEnabled = false;
ctx.imageSmoothingEnabled = false;

• 对绘制坐标和尺寸做取整处理，避免亚像素渲染：

const drawX = Math.round(this.x - this.size / 2);
const drawY = Math.round(this.y - this.size / 2);
const drawSize = Math.round(this.size);
ctx.drawImage(this.img, drawX, drawY, drawSize, drawSize);

内容的提问来源于stack exchange，提问作者Czarek Czareski