如何在Canvas Context上高效绘制独立像素？

核心需求拆解 #

• 替代繁琐的moveTo/lineTo单像素绘制方式
• 支持通过循环、公式或随机算法批量定义像素颜色
• 生成可独立操控（平移、旋转、倾斜）的像素图像对象

实现思路与代码示例 #

1. 封装像素图像生成函数 #

我们可以创建一个createPixelImage函数，接收图像尺寸、颜色规则函数，返回可复用的像素图像对象，直接操作Canvas像素缓冲区保证性能：

function createPixelImage(width, height, getPixelColor) {
  const canvas = document.createElement('canvas');
  canvas.width = width;
  canvas.height = height;
  const ctx = canvas.getContext('2d');
  const imageData = ctx.createImageData(width, height);
  const data = imageData.data;

  // 遍历每个像素，通过传入的函数获取颜色
  for (let y = 0; y < height; y++) {
    for (let x = 0; x < width; x++) {
      const index = (y * width + x) * 4;
      // 调用颜色规则函数，返回[r, g, b, a]数组，默认黑色不透明
      const [r, g, b, a] = getPixelColor(x, y) || [0, 0, 0, 255];
      data[index] = r;
      data[index + 1] = g;
      data[index + 2] = b;
      data[index + 3] = a;
    }
  }

  return {
    imageData,
    width,
    height,
    // 直接绘制到目标上下文的方法
    drawTo(ctx, x, y) {
      ctx.putImageData(this.imageData, x, y);
    },
    // 生成支持变换操作的Canvas对象
    getCanvas() {
      const canvas = document.createElement('canvas');
      canvas.width = this.width;
      canvas.height = this.height;
      const ctx = canvas.getContext('2d');
      ctx.putImageData(this.imageData, 0, 0);
      return canvas;
    }
  };
}

2. 自定义像素规则示例 #

以你提到的20x20像素图为例，预设指定坐标为白色，其余为黑色：

// 定义需要设为白色的像素坐标集合
const whitePixels = new Set([
  '0,0', '0,17', '1,9', /* 补充剩余坐标 */ '19,19'
]);

// 创建20x20的像素图像
const pixelImage = createPixelImage(20, 20, (x, y) => {
  return whitePixels.has(`${x},${y}`) ? [255, 255, 255, 255] : null;
});

如果需要随机生成像素：

// 随机生成30%的白色像素
const randomPixelImage = createPixelImage(20, 20, () => {
  return Math.random() > 0.7 ? [255, 255, 255, 255] : null;
});

3. 对生成的图像进行变换操作 #

利用getCanvas()返回的Canvas对象，结合Context的变换方法实现平移、旋转、倾斜：

const targetCtx = document.getElementById('myCanvas').getContext('2d');
const imageCanvas = pixelImage.getCanvas();

// 平移 + 旋转操作
targetCtx.save();
targetCtx.translate(50, 50); // 平移到画布(50,50)位置
targetCtx.rotate(Math.PI / 4); // 旋转45度
// 以图像中心为旋转点绘制
targetCtx.drawImage(imageCanvas, -pixelImage.width/2, -pixelImage.height/2);
targetCtx.restore();

// 倾斜操作
targetCtx.save();
targetCtx.translate(150, 50);
// 水平倾斜0.2，垂直倾斜0.3
targetCtx.transform(1, 0.3, 0.2, 1, 0, 0);
targetCtx.drawImage(imageCanvas, 0, 0);
targetCtx.restore();

关键优势 #

• 直接操作ImageData，比moveTo/lineTo绘制单像素效率更高
• 像素规则完全解耦，通过函数参数灵活适配循环、公式、随机等多种生成逻辑
• 生成的对象同时支持直接快速绘制和复杂变换操作

内容的提问来源于stack exchange，提问作者23rfew