Canvas中如何单独淡出Image Data数组存储的图像瓦片

核心问题说明 #

你当前使用的putImageData方法会直接覆盖画布对应位置的原始像素值，完全不受globalAlpha、画布合成模式等画布状态影响，因此无法直接通过调整画布参数实现单瓦片的淡出效果，需要调整瓦片的绘制逻辑。

推荐实现方案（性能最优） #

核心思路是将存储的ImageData瓦片提前转换为可被drawImage调用的位图资源，借助globalAlpha属性单独控制每个瓦片的透明度，该方案性能远高于直接操作像素，还可扩展实现瓦片的位移、缩放、滤镜等其他效果。

实现步骤 #

• 1. 初始化阶段预处理瓦片
     不要在每帧渲染时做转换，在瓦片拆分完成后一次性将所有ImageData转为GPU友好的位图资源，优先用ImageBitmap，旧浏览器用离屏Canvas兜底：

// 瓦片透明度状态数组，和瓦片一一对应，初始值1为完全不透明
this.tileAlphas = new Array(this.tileData.length).fill(1);
this.tileBitmaps = [];
const loadTiles = async () => {
  for (const imgData of this.tileData) {
    if (window.createImageBitmap) {
      // 现代浏览器高性能方案
      const bmp = await createImageBitmap(imgData);
      this.tileBitmaps.push(bmp);
    } else {
      // 旧浏览器兼容方案
      const offCanvas = document.createElement('canvas');
      offCanvas.width = tileWidth;
      offCanvas.height = tileHeight;
      const offCtx = offCanvas.getContext('2d');
      offCtx.putImageData(imgData, 0, 0);
      this.tileBitmaps.push(offCanvas);
    }
  }
}
loadTiles();

• 2. 替换原有绘制逻辑
     每帧渲染时清空画布，遍历瓦片时单独给每个瓦片设置透明度，用drawImage代替putImageData完成绘制：

// 每帧先清空画布
this.ctxTile.clearRect(0, 0, this.ctxTile.canvas.width, this.ctxTile.canvas.height);
let itr = 0;
for (let i = 0; i < tilesY; i++) {
  for (let j = 0; j < tilesX; j++) {
    // 给当前瓦片设置独立透明度
    this.ctxTile.globalAlpha = this.tileAlphas[itr];
    this.ctxTile.drawImage(
      this.tileBitmaps[itr],
      j * tileWidth,
      i * tileHeight
    );
    itr += 1;
  }
}
// 绘制完成后重置globalAlpha，避免影响其他画布绘制逻辑
this.ctxTile.globalAlpha = 1;

• 3. 实现淡出逻辑
     按帧更新对应瓦片的透明度值即可，可给不同瓦片设置不同的淡出速度、触发延迟，实现完全独立的淡出效果：

// 淡出速度：数值越小淡出越慢，1/30代表30帧从完全不透明过渡到完全透明
const fadeStep = 1 / 30;
// 对指定索引的瓦片执行一帧淡出
function updateTileFade(tileIndex) {
  if (this.tileAlphas[tileIndex] > 0) {
    this.tileAlphas[tileIndex] = Math.max(0, this.tileAlphas[tileIndex] - fadeStep);
  }
}

备选方案（直接操作ImageData像素，不推荐） #

如果因特殊需求必须直接使用ImageData绘制，可以手动修改每个瓦片像素的Alpha通道值，再调用putImageData绘制。该方案每次调整透明度都需要遍历瓦片内所有像素，高分辨率瓦片数量较多时会明显卡顿。

/**
 * 调整ImageData整体透明度
 * @param {ImageData} source 原瓦片ImageData
 * @param {number} alpha 0-1之间的透明度值
 * @returns {ImageData} 调整后的ImageData
 */
function setImageDataAlpha(source, alpha) {
  const output = new ImageData(source.width, source.height);
  output.data.set(source.data);
  // 遍历所有像素的Alpha通道（每个像素占4位，第4位为Alpha值，范围0-255）
  for (let i = 3; i < output.data.length; i += 4) {
    output.data[i] = Math.round(output.data[i] * alpha);
  }
  return output;
}

关于画布合成的补充说明 #

你猜测的画布合成方向是正确的，globalAlpha是画布合成的基础属性，但该属性仅对drawImage、路径填充、描边等标准绘制操作生效，putImageData属于像素级的直接写入操作，会绕过所有画布状态处理，直接替换目标位置的像素，因此无法直接配合合成属性实现透明效果。

内容的提问来源于stack exchange，提问作者Thomas James Thorstensson