014 Surfaceを使ってCanvas描画を行う

Surfaceは、html5のcanvas 機能をラップしたクラスです。ここではSpriteにSurfaceを画像として割り当て表示してみます。

main.js
// 初期化。
function init()
{
	game.scale = 1;
	game.fps = 30;
 
	// スプライト生成.
	var sprite  = new Sprite( SPRITE_WIDTH, SPRITE_HEIGHT );
 
	// サーフェス生成.
	var surface = new Surface( SPRITE_WIDTH, SPRITE_HEIGHT );
	// 塗りつぶし。
	surface.context.fillStyle = "white";
	surface.context.fillRect( 0, 0, 100, 100 );
	surface.context.fillStyle = "blue";
	surface.context.fillRect( 10, 10, 80, 80 );
 
	sprite.image = surface;	// サーフェスをセット.
 
	scene = new Scene();
	scene.backgroundColor = "#ccc";
	scene.addChild(sprite);
 
	game.pushScene(scene);
 
	main();
}

surface に描画する内容を設定しています。設定したものをSpriteに張り付け、Sceneに追加すれば完成です。

enchantjs_surfacedraw.zip