javascript - 有没有办法修改 Canvas 中的像素而不必复制整个缓冲区？

Question

有没有办法修改 Canvas 中的特定像素，而不必使用 ctx.getImageData 获取整个缓冲区，然后使用 ctx.putImageData 将其复制回来？这很重要，因此我不需要在每次帧更新时都进行如此昂贵的复制操作。

Answer 1

是的，只需指定要修改的区域即可:

var imageData = ctx.getImageData(x, y, width, height);

完成后，将其放回原来的位置:

ctx.putImageData(imageData, x, y);

这将抓取 x/y 处的单个像素:

var imageData = ctx.getImageData(x, y, 1, 1);

/// turn the pixel into luma
var gray = data[0] * 0.2126 + data[1] * 0.7152 +data[2] * 0.0722;
imageData.data[0] = gray;  /// r
imageData.data[1] = gray;  /// g
imageData.data[2] = gray;  /// b
imageData.data[3] = 255;   /// alpha

/// put back
ctx.putImageData(imageData, x, y);

当然，如果修改意味着像素的简单颜色变化，显然只需使用 fillRect() 或 rect() + fill() 对于许多矩形，但如果您需要做更复杂的事情(我假设这里就是这种情况)，可以通过这种方式提取区域。