photo credit: Dave DeSandro via photopin cc

今回は、先日のYahoo Creative Award 2013で作品を作成した際に使用したCreativeJSでのベジェ曲線の書き方にについて、備忘録としてまとめておく。

　　　コンテンツ

1. IllustratorかPhotoshopでベジェ曲線を描いてみる
2. Canvasを用意する
3. コードを書く
4. できました！

1. IllustratorかPhotoshopでベジェ曲線を描いてみる

IllustratorやPhotoshopで、ペンツールを利用して思い描く曲線を書いてみる。例えば、下図のようなS字の線を書いたとする。ベジェ曲線は、始点ベクトルと終点ベクトルで表される（と勝手に思っている）。緑色の矢印がそれぞれのベクトルを表す。

作成したベジェ曲線のポイントにカーソルを合わせ、座標情報を取得する。

全てのポイントを座標で表すと、おおよそ下図のようになる。

2. Canvasを用意する

下記のように、canvas要素を用意し、画面が読み込まれた時にそこにベジェ曲線を作るようにする。

&lt;canvas id="myCanvas" width=600 height=900&gt;&lt;/canvas&gt;

1 2	<canvas id="myCanvas" width=600 height=900></canvas>

3. コードを書く

コード全体。大まかな流れとしては、 + canvas要素を用意 + CreateJSを読み込む（今回使用しているのは、その内EaselJSのライブラリのみ） + stageを作成 + myShapeインスタンスを作成 + インスタンス配置位置を決定 + ベジェ曲線を作成 + stageをアップデート

&lt;!DOCTYPE html&gt;
&lt;html lang="ja"&gt;
&lt;head&gt;
&lt;title&gt;ベジェ曲線テスト&lt;/title&gt;
&lt;style&gt;
canvas {
    border: 1px solid #000;
}
&lt;/style&gt;
&lt;/head&gt;
&lt;body onload="initialize()"&gt;
&lt;canvas id="myCanvas" width=600 height=900&gt;&lt;/canvas&gt;
&lt;script&gt;
var createjs = window;
&lt;/script&gt;
&lt;script src="easeljs/utils/UID.js"&gt;&lt;/script&gt;
&lt;script src="easeljs/geom/Matrix2D.js"&gt;&lt;/script&gt;
&lt;script src="easeljs/geom/Point.js"&gt;&lt;/script&gt;
&lt;script src="easeljs/events/EventDispatcher.js"&gt;&lt;/script&gt;
&lt;script src="easeljs/display/DisplayObject.js"&gt;&lt;/script&gt;
&lt;script src="easeljs/display/Container.js"&gt;&lt;/script&gt;
&lt;script src="easeljs/display/Stage.js"&gt;&lt;/script&gt;
&lt;script src="easeljs/display/Bitmap.js"&gt;&lt;/script&gt;
&lt;script src="easeljs/display/Graphics.js"&gt;&lt;/script&gt;
&lt;script src="easeljs/display/Shape.js"&gt;&lt;/script&gt;
&lt;script src="easeljs/display/Shadow.js"&gt;&lt;/script&gt;
&lt;script&gt;
    var stage;
    //canvasを用意
    function initialize(){
        //canvasを用意
        var canvasElement = document.getElementById("myCanvas");
        stage = new Stage(canvasElement);
        createShape(0,0);
    }
    //インスタンスを配置
    function setAppearance(instance, nX, nY){
        instance.x = nX;
        instance.y = nY;
        stage.addChild(instance);
    }
    //ベジェ曲線を描画
    function createShape(nX, nY){
        var myShape = new Shape();
        var myGraphics = myShape.graphics;
        setAppearance(myShape, nX, nY);
        //ベジェ曲線本体
        myGraphics.beginStroke("#000000");
        myGraphics.moveTo(105,95).bezierCurveTo(140,145,135,60,170,95);
        myGraphics.endStroke();
        stage.update();
    }
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;