javascript - JS 中的图像数据

Question

我想知道我是否正确理解了这一点。

我循环 map 并在 map 上加载 Sprite 。

因此，我决定将像素信息存储在一个数组中，这样当我用鼠标单击时，我会检查它是否在像素数组范围内并获取与其相关的 id(实际上是像素精确的，用于检测单击的对象？ )

这是我的思考过程:

我绘制 Sprite :

ctx.drawImage(castle[id], abposx, abposy - (imgheight/2));  
myImageData[sdata[i][j][1]] = 
      ctx.getImageData(abposx, abposy, castle[id].width, castle[id].height);

然后用左键单击检查鼠标x和鼠标y是否在数组的in Between范围内并返回值myImageData？

或者我是否误解了 getImageData 的含义？

Answer 1

getImageData 为您提供图像的所有像素数据。基本上，如果您要对图像进行任何类型的像素操作，例如更改其色调/颜色，或应用滤镜，或需要特定数据，例如 r/g，则只需使用 getImageData/b，或 alpha 值。为了检查像素完美碰撞，您可以执行以下操作:

    var imageData = ctx.getImageData(x, y, 1, 1);
    if(imageData.data[3] !== 0){
        // you have a collision!
    }

imageData.data[0-3] 保存一个数据数组，0-2是颜色值r/g/b，3是alpha值。所以我们假设如果alpha为0，那么它一定是透明部分。另请注意，在示例和 fiddle 中，我从 Canvas 本身获取数据，因此如果其后面有不透明的图像，它将被视为不透明。如果您有许多重叠的图像，最好的方法是将图像本身的副本保留在屏幕外的某个位置，并进行坐标转换以获取图像上的位置。这是一个很好的MDN Article还解释了 getImageData。

<强> Live Demo