【问题标题】:HTML canvas dynamic masking [closed]HTML 画布动态屏蔽 [关闭]
【发布时间】:2014-10-14 00:18:27
【问题描述】:

简单地说,我在 HTML 画布上的屏幕上画了一条红线,我希望一个移动的白色圆圈只在它所接触的线条的当前部分可见。我读了很多关于画布遮罩的文章,但我还没有遇到类似的情况作为参考。整个圆圈不应该是可见的,只有覆盖一条或多条线的部分(如果碰巧不止一条)。 有什么建议? 谢谢!

【问题讨论】:

  • @CountingStacks :让我给你一些建议来改善你的问题:1)提及你所做的阅读,或者你阅读的结论,我们都可能从中受益 2)展示你所有的尝试确实解决了这个问题,最好用一些代码+一个jsbin来完成。 (启动器:jsbin.com/demusopajane/2/edit?js,console,output)。 3)强调问题。最好的问候。

标签: javascript html canvas drawing masking


【解决方案1】:

很高兴听到您正在学习更高级的 html Canvas 功能!

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

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

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

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

祝你的项目好运!

【讨论】:

  • @GameAlchemist:为什么投反对票?我相信我的帖子为对话提供了有用的信息。
  • 我觉得你笑(并且可能喜欢)用你的 cmets 侮辱和伤害别人很伤心。这种态度使 Stackoverflow 成为一个不那么受欢迎和令人愉快的地方。
  • 很抱歉我没有早点来这里看到您的回复。这正是我所需要的。我的名声不允许我投票给你,但如果可以的话,我会的! 'source-atop' 做了我想要的。
猜你喜欢
  • 2023-03-20
  • 1970-01-01
  • 2013-10-12
  • 1970-01-01
  • 2011-05-01
  • 1970-01-01
  • 2012-04-27
  • 2015-07-16
  • 1970-01-01
相关资源
最近更新 更多