如何在动画中使用图像数据

Question

我有一个存储 imageData 和 createImageData() 函数的对象。我不想再创建 imageData，但我希望每一帧都清除数据。我该怎么做？

Answer 1

你可以调用它的.data Uint8ClampedArray的fill(0)方法，这会将所有像素重置为透明黑色。

为了获得更好的性能，您甚至可以在 .data 的 ArrayBuffer 上创建一个 Uint32Array 视图：

const canvas = document.getElementById( 'canvas' );
const ctx = canvas.getContext( '2d' );
const imgData = ctx.createImageData( 500, 500 );
for(let i=0; i<imgData.data.length*4; i++) {
  imgData.data[ i ] = Math.random() * 255; // some noise
}
ctx.putImageData( imgData, 0, 0 );
ctx.font = "30px sans-serif";
ctx.fillText( "click to clear", 30, 30 );
canvas.onclick = (evt) => {
  // clear the ImageData
  new Uint32Array( imgData.data.buffer ).fill(0);
  ctx.putImageData( imgData, 0, 0 );

};

<canvas id="canvas" width="500" height="500" ></canvas>

如何在动画中使用图像数据

How to use imageData in animations

canvas

dirty-data

imagedata