Javascript 画布HTML-lineTo和Bezier曲线之间的平滑度

也许这更像是一个数学问题，但让我们看看：

我正在使用HTML5画布绘制折线图。 图表基本上是位置X时间。 每条线表示在给定时间（X）内处于位置（Y）的车辆。 我只有关于车辆何时通过道路上确定点的信息。因此，如果一辆车停在两点之间，我没有它实际停过的信息，但当它通过下一点时，我将能够画一条几乎水平的线，因为平均速度，即线斜率，将非常小

在这些情况下，我们定义了如果车辆在10kM/h以下移动，我认为它应该停下，并且应该画一条水平平滑线。 基本上，我必须改变这一点：

var c=document.getElementById（“myCanvas”）；
var ctx=c.getContext（“2d”）；
ctx.lineWidth=5；
ctx.lineJoin='round'；
ctx.lineCap='圆形'；
ctx.beginPath（）；
ctx.moveTo（0,30）；
ctx.lineTo（20,50）；
ctx.lineTo（220,70）；
ctx.lineTo（240110）；
ctx.stroke（）

您的浏览器不支持HTML5画布标记。
我找到了一个很好的解决方案：使用直线插值

有了下面的片段，想象一下我想要平滑
B
和
C
之间的事情，我如何选择一些贝塞尔点来保证平滑曲线而不是断裂曲线


首先，我插值线段
AB
，并找到点
B'
，这是直线
AB
将接触
C
的Y坐标的点。然后我使用相同的过程查找
C'
：


点
B'
和
C'
为贝塞尔曲线提供了良好的点，以使曲线平滑至水平线：


这在计算上也足够简单，因为找到a直线方程相当简单。
我不知道这是否是曲线拟合的计算最简单的解决方案，但graphic gems中的fitCurve代码是我将使用的，这里有一个js实现：真正的问题：为什么你会对数据撒谎并使其成为现实当你真的不知道它应该有多光滑的时候，看起来光滑？如果您只有快照数据，那么只需显示快照数据。不要让它看起来像你知道的比你实际知道的更多，只是按原样显示数据？使用连接线已经有问题了，这应该是折线图，因为这就是你真正知道的。为什么还要坚持用假线来连接这些值呢？这不是你的数据让你抽象/假设的东西。@Mike'Pomax'Kamermans问得好。简单的答案是：客户端请求。我也不明白你所说的“使用连接线有问题，这应该是折线图”是什么意思。有什么区别吗？我只有你在帖子里写的东西，如果你这么用，你会在这里寻找所有的答案，包括那些对你个人来说可能不太好的答案，但请记住：你不是在问你，你是在问你，还有所有其他在未来会发现这个问题的人，他们也需要首先考虑他们为什么这样做，以及这是否有意义。如果你有客户希望你这样做，那么你应该把它放在你的帖子里，因为它解释了你为什么需要这样做，所以完全删除了“你不应该这样做”的论点。那么，这么说吧：你能把代码扩展一点，使它成为一个好的工具吗？真正缺少的只是一些数据点的硬编码列表，以及用于将这些数据点转换为图形的函数。现在，您正在显示“裸”画布调用，没有任何类型的数据循环，因此很难给出一个关于如何使点序列看起来良好的好答案。