2 月 09 2007
CanvasとJavaScriptでActionScript3ぽくやってみる
Published by haga at 4:19 under actionscript3.0, flash, javascript, 日記
Canvasの存在を知った時に、とりあえず作ってみたサンプルが そのままデスクトップに放置してあったので公開してみます。
サンプルはここです。
忙しくて全然手を付けられないや。
Canvasを使ったグラフライブラリはいくつかあるけど グラフ以外にCanvasの良い利用法って何かねぇ・・・。 全然思いつかないや。 今回作ったサンプルは、AS3で言うところのSpriteクラスの感覚で Canvasを扱うためのクラス。
var stage = new Sprite();
stage.width = 600;
stage.height = 400;
stage.beginFill( 0xCCCCCC );
stage.drawRect( 0, 0, 400, 400 );
stage.clearRect( 10, 240, 20, 20 );
stage.beginFill( 0xFF0000 );
stage.drawCircle( 100, 100, 100 );
var s2 = new Sprite();
s2.x = 100;
s2.y = 100;
s2.beginFill( 0x0000FF );
s2.drawRect( 0, 0, 180, 180 );
s2.beginFill( 0x00FF00 );
s2.drawCircle( 160, 10, 40 );
stage.addChild( s2 );
document.getElementById('canvas').appendChild( stage );
stage.width = 600;
stage.height = 400;
stage.beginFill( 0xCCCCCC );
stage.drawRect( 0, 0, 400, 400 );
stage.clearRect( 10, 240, 20, 20 );
stage.beginFill( 0xFF0000 );
stage.drawCircle( 100, 100, 100 );
var s2 = new Sprite();
s2.x = 100;
s2.y = 100;
s2.beginFill( 0x0000FF );
s2.drawRect( 0, 0, 180, 180 );
s2.beginFill( 0x00FF00 );
s2.drawCircle( 160, 10, 40 );
stage.addChild( s2 );
document.getElementById('canvas').appendChild( stage );
こんな感じで使います。
今見てみると、Spriteクラスっていうより flash.display.Graphicsクラスじゃないか・・。
function Sprite(){
this.__element = document.createElement('div');
this.__element.style.position = 'relative';
for( var prop in Sprite.prototype ){
this.__element[prop] = Sprite.prototype[prop]
}
this.__element.initialize();
return this.__element;
}
Sprite.prototype = {
initialize:function(){
this.__color = 0x000000;
this.__canvas = document.createElement('canvas');
this.__canvas.style.position = 'absolute';
this.__context = this.__canvas.getContext('2d') || undefined;
this.appendChild( this.__canvas );
this.x = 0;
this.y = 0;
this.width = 0;
this.height = 0;
this.watch( 'x', function( i, o, n ){ this.__canvas.style.top = n } )
this.watch( 'y', function( i, o, n ){ this.__canvas.style.left = n } )
this.watch( 'width', function( i, o, n ){ this.__canvas.width = n } )
this.watch( 'height', function( i, o, n ){ this.__canvas.height = n } )
},
beginFill:function( color ){
this.__color = color || 0;
var r = ( color>> 16 & 0xFF );
var g = ( color>> 8 & 0xFF );
var b = ( color & 0xFF );
r = ( r> 0x10 ) ? r.toString(16) : '0'.concat( r.toString(16) );
g = ( g> 0x10 ) ? g.toString(16) : '0'.concat( g.toString(16) );
b = ( b> 0x10 ) ? b.toString(16) : '0'.concat( b.toString(16) );
this.__context.fillStyle = '#'.concat( r, g, b );
},
drawRect:function( x, y, width, height ){
//this.__resize( x+width, y+height );
this.__context.fillRect( x, y, width, height );
},
clearRect:function( x, y, width, height ){
this.__context.clearRect( x, y, width, height );
},
drawCircle:function( x, y, radius ){
//this.__resize( x+radius, y+radius );
this.__context.beginPath();
this.__context.arc( x, y, radius, 0, Math.PI*2, false );
this.__context.fill();
},
drawEllpse:function( x, y, width, height ){
},
addChild:function( sprite ){
this.appendChild( sprite );
},
__resize:function( w, h ){
if( this.__canvas.width <w ||
this.__canvas.height <h ){
this.__canvas.width = w;
this.__canvas.height = h;
this.beginFill( this.__color );
}
}
}
this.__element = document.createElement('div');
this.__element.style.position = 'relative';
for( var prop in Sprite.prototype ){
this.__element[prop] = Sprite.prototype[prop]
}
this.__element.initialize();
return this.__element;
}
Sprite.prototype = {
initialize:function(){
this.__color = 0x000000;
this.__canvas = document.createElement('canvas');
this.__canvas.style.position = 'absolute';
this.__context = this.__canvas.getContext('2d') || undefined;
this.appendChild( this.__canvas );
this.x = 0;
this.y = 0;
this.width = 0;
this.height = 0;
this.watch( 'x', function( i, o, n ){ this.__canvas.style.top = n } )
this.watch( 'y', function( i, o, n ){ this.__canvas.style.left = n } )
this.watch( 'width', function( i, o, n ){ this.__canvas.width = n } )
this.watch( 'height', function( i, o, n ){ this.__canvas.height = n } )
},
beginFill:function( color ){
this.__color = color || 0;
var r = ( color>> 16 & 0xFF );
var g = ( color>> 8 & 0xFF );
var b = ( color & 0xFF );
r = ( r> 0x10 ) ? r.toString(16) : '0'.concat( r.toString(16) );
g = ( g> 0x10 ) ? g.toString(16) : '0'.concat( g.toString(16) );
b = ( b> 0x10 ) ? b.toString(16) : '0'.concat( b.toString(16) );
this.__context.fillStyle = '#'.concat( r, g, b );
},
drawRect:function( x, y, width, height ){
//this.__resize( x+width, y+height );
this.__context.fillRect( x, y, width, height );
},
clearRect:function( x, y, width, height ){
this.__context.clearRect( x, y, width, height );
},
drawCircle:function( x, y, radius ){
//this.__resize( x+radius, y+radius );
this.__context.beginPath();
this.__context.arc( x, y, radius, 0, Math.PI*2, false );
this.__context.fill();
},
drawEllpse:function( x, y, width, height ){
},
addChild:function( sprite ){
this.appendChild( sprite );
},
__resize:function( w, h ){
if( this.__canvas.width <w ||
this.__canvas.height <h ){
this.__canvas.width = w;
this.__canvas.height = h;
this.beginFill( this.__color );
}
}
}
