清除交叉线的JavaScript画布lineto

Question

清除交叉线的JavaScript画布lineto

javascripthtmlcanvashtml5-canvas

5

我有一个画布，鼠标移动时画了一些线。我希望这条线只能持续几秒钟就自动消失。就像围绕着一个固定长度旋转的丝带一样。我使用lineTo在画布上画线。我从这里参考了一点代码。

问题是，我可以使用clearRect()清除线，但这会完全清除所有内容，如果线相交，则清除相交区域也是一个问题。这是我的Fiddle，点击并在右下角框内拖动：

http://jsfiddle.net/m2K5h/

我想使用clearRect，它会让我得到这样的效果： enter image description here

总结

clearRect会把所有东西都擦掉，但我想要动态地“不画”线条，让它有生命力。可我怎么也找不到能做到这一点的方法....

任何帮助都将是令人惊喜的！！！

- Alex

记录一下：你永远不应该像这样做：brush = eval("new " + BRUSHES[0] + "(context)"); eval通常是有害的，几乎没有什么事情是不能在不使用eval的情况下完成的。上面的例子等同于 brush = BRUSHES[0](context)。 - zaphod1984

是的，我从某个地方引用了源代码，那里有很多不同的画笔。我正在进行大量的代码清理和重写。我必须说，Eval 函数曾经救过我的狗皮膏药。 - Alex

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- ellisbben · Accepted Answer

< p>画布是一种位图表面。除了像素值以外，画布中没有任何东西能够表明你的线是否交叉。

为了使一条线擦除自己，您需要将绘制该线的所有坐标存储下来。当该线路需要擦除时，您可以开始一个动画，在每个帧中清除画布并重新绘制该线路的缩小部分。

jsfiddle示例

如果您还有其他较复杂的内容不想被快速擦除并重新绘制，可以将其放在第二个画布后面。