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

Question

我在画布上绘制了一个复杂的图像，我希望能够任意更改该图像中区域的透明度。我在单独的文件中将这些区域概述为掩码。有没有办法做到这一点？

我在想的是逐个像素地分析画布，如果有问题的像素落入蒙版勾勒的特定区域，请相应地修改它的透明度。但是我不确定如何检查像素是否在该区域内？我可能为每个区域有一个单独的画布元素，只检查相应的像素是否存在。但这听起来很笨拙。有更好的办法吗？优雅的？也许是一些数学魔法？还是我不知道的方法？

Answer 1

如果要检查图像中的像素是黑色还是白色，首先需要使用getImageData获取数据，然后只需检查正确坐标处的值（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

当您直接在字节数组上工作时，这非常快（如果您在检查之间保留数组）。

请注意，包含掩码的图像必须来自与您的主页相同的域。