canvas - 如何在动画中使用 imageData

Question

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

Answer 1

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

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

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>