关键在于阻止浏览器自动插值模糊：为canvas添加image-rendering: pixelated等CSS样式禁用抗锯齿，drawImage缩放时配合ctx.imageSmoothingEnabled = false，fillRect坐标和尺寸取整，DOM像素格子用grid+零行高零字体严格锁定。
要让 HTML 页面呈现清晰锐利的像素风格，关键不是“画得像不像”，而是**阻止浏览器自动插值模糊**——所有模糊、发虚、边缘半透明的问题，根源都在渲染策略上。
canvas 绘图时图片缩放发虚？用 image-rendering: pixelated
当用 ctx.drawImage() 把小图（比如 16×16）放大到 64×64 显示时，浏览器默认启用双线性插值，导致每个原始像素被“拉伸+混合”，失去块状感。
- ✅ 正确做法：给
<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"> 拼网格时，常见问题是格子错位、间隙不均、响应后变形——本质是盒模型和布局没锁死。
- 容器必须设
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 格子的盒模型控制，只要其中一环松动，边缘就会软化——复古感就没了。
