SVGでフリーハンドお絵描き - Qiita

svgでお絵描きサンプルを作ってみました。 線を滑らかにしたかったので色々と思考錯誤してみました。 やりたいこと svg上でドラッグしたらpathを追加したい pathをベジェにして滑らかにしたい 頂点を間引いて滑らかにしたい svg上でドラッグしたらpathを追加したい これは、単純にマウスイベントとフラグ管理でドラッグしている時にsvg要素にpath要素を追加していきました。 pathをベジェにして滑らかにしたい これがけっこう大変でした。 通過点のみで曲線を描くのはcatmull曲線があるのですが、まだpath要素には実装されていないようでした。 ここによると下記のようです。 R,r1 Catmull-Romスプライン曲線を引く SVG2での新機能．詳細仕様は策定中であり，動作する環境はまだない． したがって、ベジェ曲線を使うことになるのですが、通過点の他に制御点が必要です。 イラレ