Question

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

我循环我的地图并在地图上加载精灵。

所以我决定将像素信息存储在一个数组中，这样当我用鼠标点击时，我会检查它是否在像素数组范围内，并获得与之相关的id（实际上像素是否准确，可以检测到哪个对象被点击了？）

这是我的思考过程：

我画精灵：

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是否为inbetween数组的范围并返回myImageData的值？

或者我误解了getImageData的含义？

Answer 1

getImageData为您提供图像的所有像素数据。基本上，如果您正在对图像进行任何类型的像素处理，例如更改其色调/颜色，或应用滤镜，或需要特定数据（例如r / g / b），则只需使用getImageData，或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，则它必须是透明部分。另请注意，在示例和小提琴中，我从画布本身抓取数据，因此如果背后有一个图像不透明，则会被视为不透明。如果您有许多重叠的图像，最好的方法就是将图像的副本单独保留在屏幕上，然后对坐标进行平移以获得图像上的位置。这是一个很好的MDN Article解释getImageData。

<强> Live Demo

JS中的图像数据

1 个答案: