EaselJS2015/12/22こんにちは。今回は3次ベジェ曲線をCanvasに引いてみたいです。ベジェ曲線っていうのは、そうですIllustratorなんかでパスを操作するときのやつですね。こんな感じの実は以前ActionScript3でも書いたことがあるんですが、今回はJavaScriptで書いてみたかったので。Illustratorのような3次ベジェ曲線を書く(5年も前の記事ですよ!びっくり)実際にできたものイメージはこんな感じ(下の画像は動きません)動かせるやつは、これです赤丸が始点と終点。緑がコントロール(アンカー)ポイントです。やってやるのかというと公式があります。curvesこれだとよくわかんない!ってことで、もっとわかりやすく解説されているサイトがありました。Hakuhin先生ですね!AS1か2で書かれていました。3次ベジェ曲線を描画するなので、これをもとにJavaScriptにしてみます。アルゴリズムを手短にまとめると、こんな感じです。終点の4つの座標があれば、公式からそのときのベジェ曲線の座標が求められます・tの値を0から1の間で適当に変化させて、ベジェ曲線の点をいくつかもとめます。・最後にそれをつなぎ合わせれば、短い直線が曲線に見えるようになるっていうことです。tの分割数が少なければカクカクにみえて、分割数が多ければなめらかな曲線が得られます。く煮さんがずっと前にくわしく書かれてました。昔話で、今回の描画ライブラリはCreateJSの中のEaselJSを使ってます。ソースコード久しぶりにTypeScriptじゃなくて生のJavaScriptで書いてみました。LINEスタンプ作りました!毎日使える。プログラミングこのブログについてこんにちは。フロントエンドエンジニアです。自作のiPhoneアプリを作っています。