【问题标题】：Clearing javascript canvas lineto with intersecting lines用相交线清除javascript画布lineto
【发布时间】：2012-01-27 03:14:12
【问题描述】：

我有一个画布，其中有一些通过鼠标移动绘制的线条。我希望这条线在移除之前只持续几秒钟。有点像在有固定长度的地方旋转一条丝带。我正在使用 lineTo 在画布中绘制线条。我从这里引用了一些代码。

问题

我可以使用 clearRect() 清除线条，但这实际上清除了所有内容，问题是如果线条相交，它也会清除相交区域。这是我的 Fiddle 点击并在右下角的框中拖动：

clear rect 会给我这个：

总结

clearRect 只是擦除所有内容，我想动态地“取消绘制”这条线，以便它有一个生命周期。而且我这辈子都找不到可以做的事....

任何帮助都会很棒！！！！

【问题讨论】：

郑重声明：你永远不应该做这样的事情：brush = eval("new " + BRUSHES[0] + "(context)"); eval 通常是邪恶的，几乎没有什么你不能不使用 eval。上面的例子等价于brush = BRUSHES[0](context)
是的，我从某个地方引用了源代码，那里有很多不同的画笔。我正在做很多代码清理和重写。我不得不说，Eval 救了我几次培根..

【解决方案1】：

画布是位图表面。除了像素值之外，画布中的任何内容都无法表明您的线已与自身相交。

为了使线不被绘制，您需要在绘制时存储线的所有坐标。当线条需要自行取消绘制时，您会启动一个动画，其中每一帧您都会清除画布并重新绘制线条的缩小部分。

jsfiddle example

如果您不想快速擦除和重绘任何其他非常复杂的内容，请将其放在第一个画布后面的第二个画布中。

【讨论】：

投票！！很好的参考，真的很有帮助，这就是我所追求的。一般来说，我非常讨厌分层画布。特别是因为这只是一个非常复杂的 DOM 结构项目的一层，所以我需要尽可能降低 DOM 开销。