在画布上使矩形图像成为不规则形状

Question

在网上搜索了一个多小时后，我没有找到任何运气。

我想知道是否有可能，如果可以，我如何在 js 画布上创建一个透明图像，而不是被视为矩形，而只是它的可见区域。

例如，如果您单击 png 上的透明点，则脚本不会考虑对象的该部分。

谢谢你:)

Answer 1

是的，您可以使用 context.getImageData 获取有关画布上每个像素的信息

演示：http://jsfiddle.net/m1erickson/tMmzc/

此代码将获取一个数组，其中包含有关画布上每个像素的信息：

var data=ctx.getImageData(0,0,canvas.width,canvas.height).data;

data 数组由 4 个顺序元素组成，代表一个像素的红色、绿色、蓝色和 alpha（不透明度）信息。

The data array's elements #0-3 have the top-left pixel's r,g,b,a info.

The data array's elements #4-7 have the next rightward pixel's r,g,b,a info.

...and so on...

因此，给定画布上的鼠标位置，您可以获取该像素的 Alpha 信息。如果 alpha 值为零，则该像素是透明的。

这段代码会读取鼠标下的alpha值，判断是否透明：

var isTransparent = data[(mouseY*canvas.width+mouseX)*4+3]>0;