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

我正在为小孩子写一个着色游戏，最初在画布上显示黑白图像，并且随着用户将绘图工具（鼠标）移动到画布上，黑白表面会使用相应彩色图像的颜色信息进行重涂。仅将非透明像素复制到HTML5画布

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

问题是如何做到这一点？

我看到的一种方法是使用裁剪区域，但这种方法不会让我有模糊的边缘。还是呢？

所以我正在考虑使用alpha蒙版来做到这一点，并只复制对应于掩码中具有非零alpha的像素的像素。这可行吗？

来源

2012-02-10 akonsu

我的建议是在您想要显示的彩色图像前面绘制可绘制的画布。（您可以使用彩色图像作为画布的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();

来源

2012-02-10 15:15:37 andrewmu

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

这是一个来自Mozilla的演示。圆圈是按照你需要的方式绘制的。 - https://developer.mozilla.org/samples/canvas-tutorial/4_10_canvas_radialgradient.html

来源

2012-02-10 11:08:41

感谢。 Alpha渐变是他们在ActionScript中执行的方式，所以是的，我想到了这一点，我只是不知道如何使用渐变从图像复制到画布。 – akonsu 2012-02-10 11:12:30

哦，对，我读错了你的问题。抱歉。我不认为你可以用图像做到这一点。我可以考虑的唯一方法是将圆形区域渲染为一个画布，并在“xor”合成模式中绘制一个白色至黑色的径向渐变。然后将其复制到主画布。这可能不是完全可能的，但你明白了。 – 2012-02-10 11:17:50

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

来源

2012-02-10 11:18:43

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

回答

相关问题