纯前端canvas实现16×16网格像素头像生成器，通过镜像填充、预设色组、坐标转换和伪随机策略保证结构合理与视觉协调。
用 canvas 绘制像素风头像，不依赖后端
纯前端实现随机像素头像生成器，核心是用 canvas 手动控制每个像素块的颜色和位置。不需要请求 API、不上传图片、不调用外部服务——所有逻辑都在浏览器里跑。
关键点在于把头像抽象成固定尺寸的网格（比如 8×8 或 16×16），每个格子对应一个“像素”，再用随机色块填充对称区域（保证人脸结构感）。
- 推荐用
16×16网格：够清晰又不会卡顿，canvas宽高设为320（每个像素块 20px），适配屏幕也方便 - 对称填充比完全随机更像“人”：比如左右眼、耳朵、发型轮廓用镜像逻辑，避免生成出歪嘴或单边头发
- 颜色别全靠
Math.random()：肤色、发色、衣领用预设色组，否则容易出荧光绿脸或紫舌头
fillRect 画像素块时，坐标和尺寸别算错
常见错误是循环变量当成了像素坐标，结果头像挤在左上角或溢出画布。必须明确：网格索引（i, j）要转成实际像素坐标（x = j × size, y = i × size）。
示例片段：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
const size = 20; // 每个像素块宽高
for (let i = 0; i < 16; i++) {
for (let j = 0; j < 16; j++) {
const x = j * size; // 注意是 j 在前 → 对应列（水平方向）
const y = i * size; // i 在前 → 对应行（垂直方向）
ctx.fillStyle = getColor(i, j);
ctx.fillRect(x, y, size, size);
}
}- 行列顺序反了会导致头像横竖颠倒，调试时先画个红框
ctx.strokeRect(0,0,320,320)看边界 -
fillRect的宽高必须和size严格一致，不要写成size-1，否则出现白缝 - 如果想加描边效果，用
strokeRect单独画，别混在fillRect里改lineWidth，会模糊像素感
保存为 PNG 时，toDataURL 返回空字符串？
调用 canvas.toDataURL('image/png') 返回 "data:,"（只有逗号），大概率是 canvas 尚未渲染完成就执行了导出——尤其用了 requestAnimationFrame 或异步配色逻辑时。
- 确保所有
fillRect调用完毕后再导出，可用setTimeout(() => { /* 导出 */ }, 0)推到下一轮事件循环 - 检查 canvas 是否被设了
width/heightCSS 样式：这只会拉伸画面，真实分辨率仍靠canvas.width和canvas.height属性，必须显式设置（如canvas.width = 320; canvas.height = 320;） - 某些安卓 WebView 里
toDataURL会因跨域图片资源失败，但纯色块绘制无此问题，可放心用
点击生成新头像，为什么每次长得一样？
因为没重置随机种子，或者用了缓存的 Math.random() 序列。浏览器里没有真正的随机种子控制，所以得靠「伪随机」策略来打破重复感。
- 别只用
Math.random()，组合时间戳和上次颜色值：比如const seed = Date.now() ^ lastColorCode，再用简单线性同余法生成序列 - 关键部位（眼睛、嘴巴）用固定偏移取色，例如眼睛总从色表第 3/4 位选，避免某次生成两个蓝眼+黄嘴的诡异组合
- 如果用户连续点太快，加个
disabled状态和 300ms 防抖，否则 canvas 还在重绘就清空了上一帧，看起来“卡住”
像素头像的复杂点不在画布，而在怎么让随机结果既多样又合理——对称规则、色板约束、局部记忆，这些比算法本身更影响最终观感。
