javascript - 用 Canvas 绘制流畅的线条

Question

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

how to draw smooth curve through N points using javascript HTML5 canvas?

Smooth user drawn lines in canvas

两者都会导致锯齿状线条。我所说的平滑是指使用 x,y 点作为控制点来使线条平滑。这条线不需要穿过这些点。它只需要绘制一条给定 n 个点的平滑线。

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

我已经使用 bezierCurveTo 尝试了我自己的方法，但这只会平滑所有其他点，然后连接点仍然很粗糙。互联网似乎认为我正在寻找的是所谓的 B 样条曲线。我尝试对问题应用线性代数矩阵，但我失败了，哈哈。

这是我能得到的最佳曲线，(图片)。红色线是“平滑”线，如您所见，它平滑了每隔一个点，但不是连续的。这是使用来自

的代码

how to draw smooth curve through N points using javascript HTML5 canvas?

我的代码做了同样的事情

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

感谢您的帮助!

Answer 1

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

编辑:

抱歉，今天才注意到您的评论。刚好在测试相关的东西，想起了你的问题。碰巧我以前确实写过一些代码来插入一些行。它叫做Catmull-Rom (只是我用谷歌搜索的引用)它经过中间控制点。我确实将代码更改为我的测试，并认为您可能对它有一些用处。参见 http://jsfiddle.net/FHKuf/6/ .