使用相交线清除javascript画布lineto

Question

我有一个画布，其中有一些由鼠标移动绘制的线条。我想让线在移除之前只持续几秒钟。有点像围绕着有一定长度的丝带旋转。 我正在使用lineTo在画布中绘制线条。我从这里引用了一些代码。

问题

我可以通过使用clearRect（）清除该行，但这实际上清除了所有内容，问题是如果该行相交，它也会清除相交区域。 这是我的小提琴单击并在右下方框内拖动：

http://jsfiddle.net/m2K5h/

clear rect会给我这个：

摘要

clearRect只是擦除所有内容，我想动态“取消”该行，以便它具有生命周期。我不能为我的生活找到一些事情做到这一点....

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

Answer 1

画布是位图表面。除了像素值之外，画布中没有任何内容可以表明您的线已经越过了自己。

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

jsfiddle example

如果您还有其他任何显着复杂的内容，而您不想快速删除和重绘，请将其放在第一个后面的第二个画布中。