0

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

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

问题是如何做到这一点？

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

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

4

3 回答 3

2

我的建议是将您的可绘制画布放在您希望显示的彩色图像前面。（您可以将彩色图像用作画布的 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-10T15:15:37.267 回答
1

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

于 2012-02-10T11:18:43.377 回答
0

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

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

于 2012-02-10T11:08:41.953 回答