用画布绘制流畅的线条

Question

到目前为止，平滑线上的线程都不是正确的。

如何使用javascript HTML5画布通过N个点绘制平滑曲线？

在画布中平滑用户绘制的线条

两者都会导致锯齿状线条。平滑我的意思是使用 x,y 点作为控制点来使线条平滑。这条线不需要经过这些点。它只需要在给定 n 个点的情况下绘制一条平滑的线。

基本上我正在记录每个线段，然后当用户将鼠标悬停时，它会平滑线条。

我已经使用 bezierCurveTo 尝试了我自己的方法，但这只会平滑其他点，然后连接点仍然很粗糙。互联网似乎认为我在寻找什么叫做 B-Spline 曲线。我尝试将线性代数矩阵应用于该问题，但我失败了，哈哈。

这是我能得到的最好的曲线，（图片）。红色的线是“平滑”的线，你可以看到它平滑每隔一个点，但不是连续的。这是使用来自的代码

如何使用javascript HTML5画布通过N个点绘制平滑曲线？

我的代码做同样的事情

http://www.square-bracket.com/images/smoothlines.png

谢谢你的帮助！

Answer 1

您需要在线下面的点中保持相同的切线。检查http://jsfiddle.net/FHKuf/4/。

编辑：

抱歉，今天才注意到你的评论。刚好在测试相关的东西并记住了你的问题。碰巧我过去确实写了一些代码来插入一些行。它被称为Catmull-Rom（只是我在 google 上搜索到的参考），它经过中间控制点。我确实将代码更改为我的测试，并认为您可能会对它有所用处。请参阅http://jsfiddle.net/FHKuf/6/。