javascript - 如何检测透明区域单击或用户在 Canvas 中的透明区域绘制？

Question

我正在使用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

Answer 1

要查明像素是否透明，请使用 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
}