Canvasの存在を知った時に、とりあえず作ってみたサンプルが そのままデスクトップに放置してあったので公開してみます。
サンプルはここです。
忙しくて全然手を付けられないや。
Canvasを使ったグラフライブラリはいくつかあるけど グラフ以外にCanvasの良い利用法って何かねぇ・・・。 全然思いつかないや。 今回作ったサンプルは、AS3で言うところのSpriteクラスの感覚で Canvasを扱うためのクラス。
[js] 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 ); [/js]
こんな感じで使います。
今見てみると、Spriteクラスっていうより flash.display.Graphicsクラスじゃないか・・。 [js] 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 = 0×000000; 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 > 0×10 ) ? r.toString(16) : ’0′.concat( r.toString(16) ); g = ( g > 0×10 ) ? g.toString(16) : ’0′.concat( g.toString(16) ); b = ( b > 0×10 ) ? 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 ); } } } [/js]
関連記事
