canvas のラッパーライブラリーを作ろうと思った

Canvas の勉強がてら、Canvas のラッパーライブラリーの原型らしきものを作ってみた。でも EaselJS や Paper.js のような優秀なライブラリーがあるのでそれらを使ったほうがいいよなと。

ただせっかくなので、作ってみたライブラリーの残骸をここに。

矩形配置

とりあえず矩形

code

C4U.init( '#canvas' );

var myRect1 = new C4U.Rect( 100, 100 );
myRect1.position = { x: 50, y:50 };
myRect1.color = 'rgb( 255, 0, 0 )';

C4U.render();

demo

画像配置

onload された画像を Canvas に入れる用

code

C4U.init( '#canvas' );

var img = new Image();
img.src = 'miku.png';

img.onload = function () {
  var myRaster = new C4U.Raster( img );
  myRaster.position = { x: 200, y: 200 };
  C4U.render();
}

demo

イベント

Canvas 内でも jQuery ぽく使いたくて

code

C4U.init( '#canvas' );

var myRect1 = new C4U.Rect( 100, 100 );
myRect1.position = { x: 300, y: 300 };
myRect1.color = 'rgb( 255, 0, 0 )';
myRect1.name = 'red square!'

myRect1.on( 'click', function ( e ) {
  alert( this.name ); // you'll see 'red square!'
} );

demo

アニメーション

普通に requestAnimationFrame のラッパー

code

C4U.init( '#canvas' );

var myRect1 = new C4U.Rect( 100, 100 );
myRect1.position = { x: -50, y: 100 };
myRect1.color = 'rgb( 255, 0, 0 )';

( function loop(){
  window.C4U.update( loop );
  myRect1.position.x += 2;
  C4U.render();
} )();

demo

ブレンド

CSS だとできないけど Canvas はピクセル操作できるからね!

code

C4U.init( '#canvas' );

var img = new Image();
img.src = 'miku.png';

img.onload = function () {
main();
}

function main () {
  var myRect1 = new C4U.Rect( 100, 100 );
  myRect1.position = { x: 100, y: 100 };
  myRect1.rotation = 45;
  myRect1.color = 'rgb( 255, 0, 0 )';

  var myRaster = new C4U.Raster( img );
  myRaster.position = { x: 100, y: 100 };
  myRaster.blendMode = 'multiply';

  C4U.render();
}

demo

とりあえず、Github においてあります。何かの参考になれば…。

今年は three.js と EaselJS の二刀流でいこうと思います (予定)。