Javascript 仅将非透明像素复制到HTML5画布

我正在为小孩子编写一个着色游戏，最初我在画布上显示了一个黑白图像，当用户在画布上移动绘图工具（鼠标）时，黑白表面会被相应彩色图像的颜色信息覆盖

特别是，每次鼠标移动时，我都需要将一个圆形区域从彩色图像复制到画布上。圆的边缘应该有点模糊，以便更好地适应真实绘图工具的质量

问题是如何做到这一点

我看到的一种方法是使用剪裁区域，但这种方法不允许有模糊的边缘。还是这样

---

所以我想用一个alpha掩模来实现这一点，只复制对应于掩模中非零alpha像素的像素。可行吗？

您是否考虑过使用从不透明颜色到完全透明颜色的径向渐变

---

这是Mozilla的一个演示。圆圈是按你需要的方式画的

您是否考虑过使用从不透明颜色到完全透明颜色的径向渐变

---

这是Mozilla的一个演示。圆圈是按你需要的方式画的

我可能会使用具有不同alpha的多个剪裁区域（每个区域一个dab）来模拟您想要的效果。首先渲染低透明度区域（使用drawImage粘贴），然后渲染其余区域，直到达到alpha=1.0。

我可能会使用多个具有不同alpha的剪裁区域（每个区域一个dab）来模拟您所追求的效果。首先渲染低不透明度的图像（使用drawImage粘贴），然后渲染其余的图像，直到alpha=1.0。

我的建议是将可绘制画布放在要显示的彩色图像前面。（您可以将彩色图像用作画布的CSS背景图像。）

最初，画布包含100%不透明度的黑白图像。然后，在绘制时，实际擦除画布的内容以显示后面的图像

像这样：

var pos_x, pos_y, circle_radius;  // initialise these appropriately

context.globalCompositeOperation = 'destination-out';
context.fillStyle = "rgba(0,0,0, 1.0)";

// And "draw" a circle (actually erase it to reveal the background image)
context.beginPath();
context.arc(pos_x, pos_y, circle_radius, 0, Math.PI*2);
context.fill();

---

我的建议是把你的可画画布放在你想要展示的彩色图像前面。（您可以将彩色图像用作画布的CSS背景图像。）

最初，画布包含100%不透明度的黑白图像。然后，在绘制时，实际擦除画布的内容以显示后面的图像

像这样：

var pos_x, pos_y, circle_radius;  // initialise these appropriately

context.globalCompositeOperation = 'destination-out';
context.fillStyle = "rgba(0,0,0, 1.0)";

// And "draw" a circle (actually erase it to reveal the background image)
context.beginPath();
context.arc(pos_x, pos_y, circle_radius, 0, Math.PI*2);
context.fill();

---

谢谢Alpha渐变是ActionScript中的方式，所以是的，我考虑过，我只是不知道如何使用渐变将图像复制到画布上。哦，对了，我看错了你的问题。很抱歉我不认为你能用图像做到这一点。我能想到的唯一方法是将圆形区域渲染到一张画布上，并在

xor

合成模式下绘制一个从白色到黑色的径向渐变。然后将其复制到主画布。这样可能不太可能，但你明白了。谢谢。Alpha渐变是ActionScript中的方式，所以是的，我考虑过，我只是不知道如何使用渐变将图像复制到画布上。哦，对了，我看错了你的问题。很抱歉我不认为你能用图像做到这一点。我能想到的唯一方法是将圆形区域渲染到一张画布上，并在

xor

合成模式下绘制一个从白色到黑色的径向渐变。然后将其复制到主画布。这样做可能不太可能，但你已经明白了。