Canvas 如何检查像素是否在特定区域内？

我在画布上绘制了一幅复杂的图像，我希望能够任意改变图像中区域的透明度。我在单独的文件中把这些区域列为遮罩。有没有办法做到这一点

---

我所想的是逐像素分析画布，如果所讨论的像素落入遮罩勾勒出的特定区域，则相应地修改其透明度。但我不知道如何检查像素是否在该区域内？我可能有一个单独的画布元素用于每个区域，只需检查相应的像素是否存在。但听起来很笨重。还有更好的办法吗？优雅的也许是一些数学魔术？还是我不知道的方法？

如果要检查图像中的像素是黑色还是白色，首先需要使用获取数据，然后只需检查正确坐标处的值（4字节，因为RGBA）

var maskCanvas = document.createElement('canvas');
maskCanvas.width = w;
maskCanvas.height = h;
var context = maskCanvas.getContext('2d');
context.drawImage(yourMaskImage, 0, 0);
var pixels = context.getImageData(0, 0, w, h).data;

如果您的图像具有尺寸

（w，h）

，则阵列的大小将为

w*h*4

，您可以使用以下方法在

（x，y）

处获得颜色：

var i = 4*(x+w*y); // 
var color = (pixels[i]<<16) + (pixels[i+1]<<8) + (pixels[i+2]); // I don't care about the alpha

var i=4*（x+w*y）；//
var color=（像素[i]如何定义“区域”？它们是多边形？正方形？位图遮罩？作为遮罩。白色背景上的黑点。位图。但我可能会考虑使用一些多边形，如果这能使任务更简单、更有效的话。位图遮罩占用更多内存，但在初始化之后，它们甚至比多边形更快，用于简单的像素检查。因此，这是唯一有效的方法-要将所有掩码加载到字节数组中，然后检查像素是否存在？每个区域都将独立地更改透明度。是的。但是，随着像素解码（从图像格式）并在准备读取的数组中，这既快速又简单。我在非常大的图像上执行此操作（存储2D贴图）。