HTML canvas动态屏蔽

时间:2014-08-20 15:02:02

标签: javascript html canvas drawing masking

简单地说,我在HTML画布上在屏幕上画了一条红线,我希望移动的白色圆圈只能在它触摸的线的当前部分可见。我阅读了很多关于画布蒙版的内容,但我还没有遇到类似的情况作为参考。整个圆圈永远不应该是可见的,只有它的一部分覆盖一条或多条线条,如果恰好有多条线条。 有什么建议? 谢谢!

1 个答案:

答案 0 :(得分:-1)

我很高兴听到您了解更高级的html Canvas功能!

我建议您接下来阅读context.globalCompositeOperation

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Compositing

合成允许您操纵相对于现有图纸绘制新图纸的方式。

特别是source-atop合成模式应该对您的情况有所帮助,因为新图纸(您的圆圈)只会出现在与现有图纸(您的线)相交的位置。

祝你的项目好运!