Question

我正在为小孩子写一个着色游戏，我最初在画布上显示黑白图像，当用户将绘图工具（鼠标）移到画布上时，黑白表面会越过 - 用相应彩色图像的颜色信息绘制。

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

问题是如何实现这个目标？

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

所以我正在考虑使用alpha蒙版进行此操作，并仅复制与蒙版中具有非零alpha的像素相对应的像素。这可行吗？

Answer 1

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

Answer 2

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

Answer 3

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

以下是Mozilla的演示。圆圈按您需要的方式绘制。 - https://developer.mozilla.org/samples/canvas-tutorial/4_10_canvas_radialgradient.html

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

3 个答案: