填充HTML画布，不包括任意（可能重叠）的圆圈

Question

鉴于已经绘制的HTML画布，除了给定的圆形区域之外，遮挡整个画布的最佳方法是什么？ （在上下文中：阴影除了有光源的地方）

我希望它会像rect()一样简单，然后跟随arc()，但AFAIK之后无法“删除”那些圆形部分。我可以靠近（http://jsfiddle.net/mW8D3/2/），但圆圈的重叠区域最终以阴影显示（以XOR方式，而我想要OR）。使用clip()会遇到同样的问题。

我也尝试使用globalCompositeOperation，但似乎无法达到我想要的效果。

有什么想法吗？

Answer 1

您可以先在第二个画布上创建阴影图像，然后使用globalCompositeOperation'copy'和透明fillStyle从中删除孔。

像这样：http://jsfiddle.net/mW8D3/4/