javascript - キャンバスで滑らかな線を描く

Question

これまでのところ、滑らかな線に関するスレッドはどれも正しくありません。

javascript HTML5キャンバスを使用してN点を通る滑らかな曲線を描く方法は?

キャンバスでユーザーが描いた線を滑らかにする

どちらもギザギザの線になります。滑らかとは、x、y ポイントをコントロール ポイントとして使用して線を滑らかにすることを意味します。線は点を通過する必要はありません。n 点を指定して滑らかな線を描くだけです。

基本的に、各線分を記録しています。ユーザーがマウスを離すと、線が滑らかになります。

私は bezierCurveTo を使用して独自の方法を試しましたが、それは他のすべてのポイントを滑らかにするだけであり、接続ポイントは依然として厳しいです。インターネットは、私が探しているのは B-Spline 曲線と呼ばれていると考えているようです。問題に線形代数行列を適用しようとしましたが、失敗しました笑。

これが私が得ることができる最高の曲線です（画像）。赤の線は「平滑化された」線です。1 つおきの点が平滑化されていることがわかりますが、連続していません。これはからのコードを使用しています

javascript HTML5キャンバスを使用してN点を通る滑らかな曲線を描く方法は?

私のコードは同じことをします

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

ご協力いただきありがとうございます！

Answer 1

ラインの次のポイントで同じ接線を維持する必要があります。http://jsfiddle.net/FHKuf/4/を確認してください。

編集：

申し訳ありませんが、今日あなたのコメントに気づきました。たまたま関連する何かをテストしていて、あなたの質問を思い出しました。過去に、私がいくつかの行を補間するためのコードを書いたことがあります。それはCatmull-Rom（私がググった参照）と呼ばれ、中央のコントロールポイントを通過します。私は自分のテストにコードを変更しました、そしてあなたがそれをいくらか使用するかもしれないと思いました。http://jsfiddle.net/FHKuf/6/を参照してください。