填充 HTML 画布，排除任意（可能重叠）圆圈
给定一个已经绘制的 HTML 画布，除了给定的圆形区域之外，对整个画布进行着色的最佳方法是什么？ （在上下文中：阴影除了有光源的地方）
我希望它像 rect() 后面跟着后续的 arc() 一样简单，但据我所知有事后无法“删除”这些圆形部分。我可以接近（http://jsfiddle.net/mW8D3/2/），但是重叠圆的区域最终被阴影化（以异或方式，而我想要或）。使用clip()也有同样的问题。
我也尝试过使用 globalCompositeOperation 但似乎无法完全实现我想要的。
有什么想法吗？
Given an HTML canvas that has already been drawn to, what's the best way to shade the whole canvas except given circular regions? (in context: shadows except where are there light sources)
I was hoping it would be as simple as a rect() followed by subsequent arc()s, but AFAIK there's no way to "remove" those circular sections after the fact. I can get close ( http://jsfiddle.net/mW8D3/2/), but the overlapping regions of circles end up shaded (in XOR fashion, whereas I want OR). Using clip() has the same problem.
I've also tried using globalCompositeOperation but can't quite seem to achieve what I want.
Any ideas?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
您可以首先在第二个画布上创建阴影图像，然后使用 globalCompositeOperation“copy”和透明 fillStyle 从中挖出孔。
像这样： http://jsfiddle.net/mW8D3/4/
You could first create the shadow image on a second canvas and knock out holes from it with globalCompositeOperation 'copy' and a transparent fillStyle.
Like this: http://jsfiddle.net/mW8D3/4/