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

Making rectangular image an irregular shape on a canvas

本文关键字：不规则 图像      更新时间：2023-09-26

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

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

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

谢谢你

是的，你可以使用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;
相关文章：