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

{{:wiki:enchant.js:tips:enchantjs_014_000.png?200|}}

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

==== ソースコード ====
<code javascript>
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();
}
</code>
surface に描画する内容を設定しています。設定したものをSpriteに張り付け、Sceneに追加すれば完成です。

==== ダウンロード ====
{{:wiki:enchant.js:tips:enchantjs_surfacedraw.zip|}}