清除带有相交线的 javascript canvas lineto
我有一个画布，上面有一些通过鼠标移动绘制的线条。我希望这条线在自行移除之前只持续几秒钟。有点像在设定长度的地方旋转丝带。 我正在使用 lineTo 在画布中绘制线条。我从这里引用了一些代码。
问题
我可以使用clearRect() 来清除线条，但这实际上会清除所有内容，问题是如果线条相交，它也会清除相交区域。 这是我的小提琴单击并拖动到右下框内：
清晰的矩形会给我这个： 
总而言之
clearRect 只是擦除所有内容，我想动态“取消绘制”这条线所以它有一个生命周期。我一生都找不到事情来做……
任何帮助都会很棒！！！！
I have a canvas which has some lines drawn by mouse movement. I want the line to only last for a few seconds before removing itself. A bit like swirling a ribbon around where it has a set length.
I am using lineTo to draw the lines in the canvas. I referenced a bit of the code from here.
The problem
I can clear the line by using clearRect() but this literally clears everything and the problem is that if the line intersects it clears the intersecting area too.
here is my Fiddle click and drag inside the bottom right box:
clear rect would give me this:
In Summary
clearRect just wipes everything, I want to dynamically 'un draw' the line so it has a lifetime. And I can't for the life of me find something to do it....
Any help would be amazing!!!!
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
画布是位图表面。除了像素值之外，画布中的任何内容都无法表明您的线条已与自身交叉。
为了使线条本身取消绘制，您需要存储绘制线条时的所有坐标。当线条自行取消绘制时，您将启动一个动画，其中每一帧都会清除画布并重新绘制线条的收缩部分。
jsfiddle 示例
如果您有任何其他非常复杂的内容，您不想快速删除和重绘，将其放在第一个画布后面的第二个画布中。
The canvas is a bitmap surface. Nothing in the canvas could indicate that your line has crossed itself, other than the pixel values.
In order to have a line un-draw itself, you need to store all the coordinates for the line as it is drawn. When it is time for the line to un-draw itself, you start an animation where every frame you clear the canvas and redraw a shrinking portion of the line.
jsfiddle example
If you have anything else of significant complexity that you wouldn't want to erase and redraw rapidly, put that in a second canvas behind the first.