绘制移动线/曲线的最佳方法是什么？答案

【问题标题】：What is the best way to draw a moving line/curve?绘制移动线/曲线的最佳方法是什么？
【发布时间】：2023-03-07 19:23:01
【问题描述】：

我想使用 JavaScript 和 Canvas 绘制“移动”线条。基本上，我想绘制一条贝塞尔曲线，但不是一次全部绘制曲线，而是随着时间的推移绘制曲线的片段，使其看起来在增长。更好的解释可能是：我希望线路从原点开始，然后随着时间的推移移动到目的地点。实现这一目标的最佳方法是什么？

【问题讨论】：

一系列setTimeout()s 或setInterval()？到目前为止你有什么？（建议对现有代码进行一些更改比从头开始更容易。）
根据您的情况，一个可能不太可靠的解决方案可能是在实心不透明块元素后面绘制曲线，然后滑动或盲目地为覆盖元素设置动画以显示曲线。我不确定我什至想最终得到这样的解决方案，但这是一种选择。

【解决方案1】：

我创建了一个名为 jCurvy 的 jQuery 插件，它允许您沿着贝塞尔曲线放置元素。您可以将 jCurvy 与 fadeIn 方法和回调一起使用来完成您正在谈论的事情。看看我在这里设置的示例：

如果您最终选择了这条路线并且遇到任何问题，请告诉我。我很确定您会是第一批使用该插件的人之一，所以我希望得到一些反馈。

【讨论】：

【解决方案2】：

我正在寻找一种方法来做同样的事情，并找到了 jQuery Tween and jQuery Curve 插件，在此处进行了描述和演示： http://heygrady.com/blog/2011/07/20/animating-with-curves-in-jquery/

【讨论】：

【解决方案3】：

使用 setTimeout 或 setInterval。你也可以使用动画功能

【讨论】：