明白了，阿杰！下面给你一个 Canvas 绘制像素风图片的完整示例，特点：

  • 通过二维数组或像素数据生成像素画
  • 可控制每个“像素”的大小
  • 可动态渲染颜色

示例实现一个简单的 8×8 像素爱心图案：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Canvas 像素风示例</title>
<style>
  body { display:flex; justify-content:center; align-items:center; height:100vh; background:#f5f5f5; }
  canvas { border:1px solid #333; image-rendering: pixelated; }
</style>
</head>
<body>

<canvas id="pixelCanvas" width="160" height="160"></canvas>

<script>
const canvas = document.getElementById('pixelCanvas');
const ctx = canvas.getContext('2d');

// 每个像素大小
const pixelSize = 20;

// 像素数据（8x8 心形）
const pixelData = [
  [0,0,1,0,0,1,0,0],
  [0,1,1,1,1,1,1,0],
  [1,1,1,1,1,1,1,1],
  [1,1,1,1,1,1,1,1],
  [0,1,1,1,1,1,1,0],
  [0,0,1,1,1,1,0,0],
  [0,0,0,1,1,0,0,0],
  [0,0,0,0,0,0,0,0],
];

// 对应颜色（0=透明，1=红色）
const colors = ['#ffffff00','#ff0000'];

// 绘制像素画
function drawPixelArt(){
  for(let y=0; y<pixelData.length; y++){
    for(let x=0; x<pixelData[y].length; x++){
      ctx.fillStyle = colors[pixelData[y][x]];
      ctx.fillRect(x*pixelSize, y*pixelSize, pixelSize, pixelSize);
    }
  }
}

drawPixelArt();
</script>

</body>
</html>

🔹 特性说明

  1. 像素风效果
    • image-rendering: pixelated; 保持像素边缘清晰
    • 每个像素通过 fillRect 绘制
  2. 自定义像素图
    • pixelData 数组中每个值对应一种颜色
    • 可扩展成更大分辨率，如 16×16、32×32
  3. 易扩展
    • 可添加动态效果（如闪烁、动画）
    • 可加载真实小图像，转为像素风绘制