canvas+javascriptでなめらかな線を描く
昨日の記事に引き続きcanvasとjavascriptについてです。
html5のcanvasには、線を描くためのメソッドが用意されています。
詳しい使い方は、ここに載っています。
ただし、この方法では素早く描いた時に線が、がたがたになってしまいます。
このがたがたを補正するために、パラメトリック曲線というのを使います。
パラメトリック曲線とは、媒介変数(パラメータ)で表される曲線のことです。
代表的なパラメトリック曲線には以下の種類があります。
・Ferguson/Coons曲線
・Catmull-Romスプライン曲線
・Bスプライン曲線
・NURBS曲線
赤い文字で表されてるベジェ曲線に関しては、実はcanvasの中にメソッドが用意されています。
ちなみに2次と3次それぞれ両方のメソッドが用意されいます。
ベジェ曲線による補正をした場合の線は下の画像になります。
これは3次のベジェ曲線です。
同じ線を描かなかったので、比較がしずらいですが線がなめらかになってます。
しかし、まだ角ばった部分が残ってしまってます。
この原因は、ベジェ曲線どうしをつなぎあわせる点での連続性が確保されていないからです。
この点での連続性を確保する方法は、Catmull-Rom曲線を用いる補正法です。
一応、アルゴリズムは全て実装したのですが思ってた通りの動作をしないのでコードを確認中です。
なので、記事の題名ではなめらかな線を描くとなってますが、実際はまだ描けてませんm(_ _)m
~余談~
ブログってどう書くのがいいんですかね?
アウトプットを増やすために頑張るという目的で始めたのですが、気張り過ぎると書く気はあるけどいつまで経っても、もう少し考えがまとまってから書こうってなってしまいます。
そして、気軽に書けば良いという思いで書くといかんせん趣旨が不明確なよくわからない記事になってしまいます。
ブログを書く目的である知識の定着を促進するためには、学会論文並みのきっちりした記事を時間をかけて書くのがいいのか、備忘録並みの記事を毎日書くのがいいのか？
