关键在于阻止浏览器自动插值模糊：为canvas添加image-rendering: pixelated等css样式禁用抗锯齿，drawimage缩放时配合ctx.imagesmoothingenabled = false，fillrect坐标和尺寸取整，dom像素格子用grid+零行高零字体严格锁定。
要让 HTML 页面呈现清晰锐利的像素风格，关键不是“画得像不像”，而是**阻止浏览器自动插值模糊**——所有模糊、发虚、边缘半透明的问题，根源都在渲染策略上。
canvas 绘图时图片缩放发虚？用 image-rendering: pixelated
当用 ctx.drawImage() 把小图（比如 16×16）放大到 64×64 显示时，浏览器默认启用双线性插值，导致每个原始像素被“拉伸+混合”，失去块状感。
- ✅ 正确做法：给
<canvas></canvas>元素加 CSS，不写 JS 动态设样式 -
canvas { image-rendering: pixelated; }是现代标准，Chrome 89+、Firefox 78+、Safari 15.4+ 均原生支持 - 旧版兼容可叠加：
image-rendering: -moz-crisp-edges;（Firefox）、-webkit-optimize-contrast;（Safari） - ⚠️
ctx.imageSmoothingEnabled = false只影响drawImage的缩放行为，不影响 canvas 自身被 CSS 缩放（比如width: 200px; height: 200px;），所以必须配 CSS 才完整
用 div 模拟像素格子？用 CSS Grid 控制尺寸和对齐
靠一堆 <div class="pixel"> 拼网格时，常见问题是格子错位、间隙不均、响应后变形——本质是盒模型和布局没锁死。
<ul>
<li>容器必须设 <code>display: grid，并用 grid-template-columns 明确列数，避免依赖浮动或 inline-block
width: 8px; height: 8px;），且禁用 margin/padding/border（除非你明确要“边框像素”）font-size: 0; 和 line-height: 0; 到容器element.style.backgroundColor，别用 class 切换——class 有重排开销，像素画频繁点击会卡Canvas 里手绘像素块？用 fillRect 而非描边或路径
有人用 beginPath+rect+stroke 画像素，结果边缘模糊或粗细不一——因为 stroke 是居中绘制，1px 线在 2×2 像素区域上渲染，必然模糊。
- ✅ 唯一可靠方式：
ctx.fillRect(x, y, size, size)，坐标和尺寸都取整数 - 确保
x、y是整数（Math.floor或位运算|0），否则 canvas 内部会做亚像素渲染 - 避免用
scale()整体缩放画布；如需放大视图，应放大 canvas 元素本身（CSS width/height），再配合image-rendering: pixelated - 如果批量绘制大量像素块，先用循环算好所有
(x,y)，再一次性调用fillRect，别在循环里反复设fillStyle
最容易被忽略的一点：像素风格不是“画小一点”，而是**全程拒绝亚像素和插值**。从 canvas 的 CSS 渲染属性、JS 坐标取整、到 DOM 格子的盒模型控制，只要其中一环松动，边缘就会软化——复古感就没了。
