我正在使用drawImage 将图像绘制到 Canvas 上。它是一个被透明像素包围的 PNG,如下所示:
如何检测 Canvas 上该图像的透明部分中的绘图移动路径?我想检测用户是否绘制透明部分。
我正在尝试这个tutorial我按照tutorial中所示进行了操作.
var ctx = canvas.getContext('2d'),
img = new Image;
img.onload = draw;
img.src = "/image/UFBxY.png";
function draw() {
// draw original image in normal mode
ctx.drawImage(img, 10, 10);
}
<canvas id=canvas width=500 height=500></canvas>
查看 Github 上的完整代码
查看现场演示 IonCanvas
最佳答案
要查明像素是否透明,请使用 ctx.getImageData
获取像素并查看 alpha 值。
示例
// assumes ctx is defined
// returns true if pixel is fully transparent
function isTransparent(x, y) { // x, y coordinate of pixel
return ctx.getImageData(x, y, 1, 1).data[3] === 0; // 4th byte is alpha
}
关于javascript - 如何检测透明区域单击或用户在 Canvas 中的透明区域绘制?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58801460/