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

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个连续元素组成，代表红色，绿色，蓝色和＆amp;关于一个像素的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;