Paper.jsを触ってみた。

2011-10-29

HTML5のCanvasってそのままじゃあ、どうも扱いにくいというか学ぶ時の最初のハードルが高いという印象があった。
その中でもちょっといい感じだと思ったベクターグラフィックを扱いやすくするフレームワークPaper.jsを触ってみた。
おそらく他のフレームワークもそうだろうけどFlashのActionScriptを触ったことあるってひとだと馴染みやすい。
自分のサイトの背景で動くものからはじめてみたのがこれ。

まずはHTMLの記述から。
canvasにid属性とその値を設定する。この場合は「myCanvas」とした。少し注意しないといけないのがscript要素のtype属性値の記述。JavaScriptの場合、HTML5ではtype属性そもそも記述しなくてもいいし、記述する場合も「text/javascript」とするがPaper.jsでは値を「text/paperscript」とする（最初書き忘れてたら何も表示されなかった。。。）。リファレンス読むと「text/javascript」という属性値でもやる方法があるけど今回は省略。で、もうひとつは描画するためのcanvasのid属性値をcanvasという属性の値に記述すること（これも違う方法が用意されている）。ちょっとやり方がいろいろあるみたいなので統一して欲しい気もする。
これで準備は終わり。

<!DOCTYPE html>
<html>
<head>
<!--Paper.jsの読み込み-->
<script type="text/javascript" src="js/paper.js"></script>
<!--Paper.jsへのコードを以下に記述する-->
<script type="text/paperscript" canvas="myCanvas">
</script>
<canvas id="myCanvas"></canvas>

<script type="text/javascript" src="/common/js/paper.js"></script>
<script type="text/paperscript" canvas="myCanvas">
var myView = new View("myCanvas");
myView.viewSize = new Size(500, 300);
var myCircle = new Path.Circle(myView.center, 50);
myCircle.fillColor = '#000000';
</script>
<canvas id="myCanvas" style="background: #eee;" class="mt15p"></canvas>

上の黒い丸を描画しているのが以下のスクリプトを実行した結果。

var myView = new View("myCanvas");
myView.viewSize = new Size(500, 300);
var myCircle = new Path.Circle(myView.center, 50);
myCircle.fillColor = '#000000';

ちょっと解説すると以下はcanvas要素の大きさを設定している。canvasってCSSで幅と高さを指定すると単純に拡大されたり縮小されたりして変な描画になってしまうの？style属性でwidthとheightでPixel指定したら駄目なのかな？なのでwidth、height属性で指定か以下のような指定をする。

1 2	var myView = new View("myCanvas"); myView.viewSize = new Size(500, 300);

以下が黒い丸を描画しているところ。myView.centerってのはcanvasの上下、左右の中心width/2とheight/2の座標がはいる。この場合は250と150となる。座標を直接記述する場合はnew Point(250, 150)ってなる。new Path.Circleって記述で描画される。第2引数の50は半径。myCircle.fillColorは塗りつぶしの色指定となる。この場合は「#000000」で黒で塗りつぶしている。’black’って感じで色名でもよい。