getImageData() 性能

Question

我只需要获取 canvas 上单个像素的状态，但我注意到它的速度非常慢。

这是我的 JS

var state = ctx.getImageData(x,y,1,1).data;
state = 'rgba(' + state[0] + ',' + state[1] + ',' + state[2] + ',' + state[3] + ')';
return state;

是否有替代方法来获取 canvas 上单个像素的状态？

Answer 1

那么这个神奇的像素是如何变化的呢？

由于您正在进行编程，因此您应该能够注意到会更改该像素的活动。

例如，如果您（或用户）正在该像素上移动某物，这会改变该像素，那么您将能够预测该像素上任何物体的路径（或注意到用户正在该像素上移动某物）像素）。

无论如何，如果 .getImageData 拖累了您的性能，我的建议是设置一个 .requestAnimationFrame 循环并以更大的间隔检查该像素的变化。如果您每 1/60 秒检查一次，也许只需每 5/60 秒检查一次。