javascript - 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 秒检查一次。