使用相交线清除javascript画布lineto

Question

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

问题

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

http://jsfiddle.net/m2K5h/

明确的rect会给我这个:

综上所述

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

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

Answer 1

画布是位图表面.除了像素值之外,画布中的任何内容都不能表明您的线已经越过了自己.

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

jsfiddle的例子

如果你有任何其他重要的复杂性,你不想删除和快速重绘,请将其放在第一个后面的第二个画布中.