canvasライブラリを作ろう！その2【html5】

photo by woody1778a

前回の記事で制作を開始したcanvasライブラリですが、ちまちまと機能を増やしたのでちょっとずつ公開します。
では使い方おさらいです。

ソースはこちら。
http://meat18.mods.jp/new/library/canvas_ctr.js

まず、キャンバスタグのコンテキスト操作用のオブジェクトを取得します。

/*ContextObjectクラスのインスタンスを作成します。*/
var ContextObject = CANVAS_CTR.Context.ContextObject;

var canvas = new ContextObject({width:400,height:150});

これでcanvasタグが自動的に生成されますが、既に存在するcanvasタグを指定する場合は、そのIDを指定するとコンテキスト操作オブジェクト化することができます。

/*canvasを生成*/
var canvas = new ContextObject({id:"canvas",width:400,height:150});

コンテキスト操作オブジェクトのインスタンスは、自身のプロパティとしてDisplayObjectContainerクラスのインスタンスを自動的に生成します。
DisplayObjectContainerクラスのインスタンスは、1次元配列でDisplayObjectクラスのインスタンスを格納し、コンテキストの表示リストに加えたり削除したりといった役割を担います。

次は表示させるオブジェクトを表すDisplayObjectクラスを説明します。
DisplayObjectは現在、画像を表示するimageObjクラスと円を描くCircleクラスしかサポートしていません。
これから順次実装していく予定です。

今回は画像オブジェクトであるImageObjを説明しようと思います。
CANVAS_CTR.DisplayObject.Images.ImageObjクラスのインスタンスを作成し、ContextObjectのaddChildメソッドで表示リストに加えます。

/*ImageObjクラスのインスタンスを作成します。*/
var ImageObj = CANVAS_CTR.DisplayObject.Images.ImageObj;

var imgObj1 = new ImageObj({width:"auto",height:"auto",x:20,y:20,src:"image.jpg",alpha:0.7,rot:30,rotateOption:"center"});

/*もうひとつ*/
var imgObj2 = new ImageObj({width:130",height:"auto",x:20,y:50,src:"image.jpg",alpha:0.7,rot:40,rotateOption:{x:10,y:30},webkitNoRotate:true});

canvas.addChild(imgObj1,imgObj2);

addChildメソッドはいくらでも引数を追加できます。

ここで使ったImageObjの引数のパラメータを説明します。

width … 画像オブジェクトの幅　autoでアスペクト比を保ちつつheightに合わせる
height … 画像オブジェクトの高さ widthもheightもautoなら画像本来のサイズになる
x … canvas内でのx座標
y … canvas内でのy座標
src … 画像ソースのURL
alpha … 透過度　0～1の間で指定
rot … 回転させる角度　好きな数値で指定
rotateOption … どこを中心に回転させるか　{x:0, y:0}で、画像の左上　"center"で画像の中心　指定なしでキャンバスの左上を中心に回転する
webkitNoRotate … trueにするとレンダリングエンジンにwebkitを利用しているブラウザでは回転せずに表示させる(クロームやsafariで回転表示すると綺麗に見えないため)

それぞれ動的に変更することができます。

imgObj1.rot += 10;

パラメータを変更するだけでは表示に反映されないので、canvasをレンダリングしなおします。

imgObj1.rot += 10;
canvas.render();

window.setInterval関数で簡単にアニメーションができます。

window.setInterval(function(){
imgObj1.rot += 10;
canvas.render();
},20);

表示リストから消す時はremoveChildメソッドを使います。

canvas.removeChild(imgObj1);

・・・と、こんな感じまでできています。

明日明後日は久々の休み！なので、ちょこちょこアップデートできたらいいなぁ。
ご要望やアドバイスなどあれば是非！！

記事の話題関連のツイート on twitter