2012.02.27 | kyontaro
はじめまして。きょんたろです。
今回はhtml5のcanvasをすぐ使うようにTempleteを作ってみました。
まだいろんな技能はないですけどどんどんupdateする予定です。
そして追加したらいいな~ものがあれば教えてくださったら追加しておきます。
1.cssはdevjamのtempleteを使っています。
2.utils.jsにはいろいろutilのjsがicludeされています。
3.canvasUtils.jsにはcanvasの関するjsがicludeされています。
4.canvasBase.jsは基本になるjsです。
CanvasBasic_ver1.zip
index
/** * @author shiftBrain DevJam * canvas groung ver1 * 2012.02.23 */ //-------------------------------------------------------------------------------- // window loaded //-------------------------------------------------------------------------------- function canvasStart(canvasID) { if(canvasSupport){ canvasApp(canvasID); } } //-------------------------------------------------------------------------------- // canvas support ture ? false //-------------------------------------------------------------------------------- function canvasSupport(){ return Modernizr.canvas } function canvasApp(canvasID) { // --------------------------------------------------------------------------- // Common Variables ---------------------------------------------------------- var sw; // window Width var sh; // window height var cvs; // canvas var ctx; // canvas context var resize = false; // canvas resize function true / false var frame = new FrameRateApp(10); //bin/common/js/utils/frameRateApp.js var timer = new Timer(); //bin/common/js/utils/timerApp.js //Debugger.log(frame.getInteval()); //Debugger.log(frame.getFRAME()); cvs = document.getElementById(canvasID); ctx = cvs.getContext("2d"); resize = false; canavsResize(); // --------------------------------------------------------------------------- // canvas resize ------------------------------------------------------------- // ## HOW TO USE ## // canavsResize() --> window Size Setting // canavsResize(10,10) --> width=10 height=10 customer size setting // --------------------------------------------------------------------------- window.addEventListener("resize",canavsResize, false); function canavsResize(w,h){ sw = WindowSize.width(); //bin/common/js/utils/getSize.js sh = WindowSize.height(); Debugger.log("resizeEvent="+sw+"x"+sh); if(!w || !h){ if(cvs && resize){ cvs.width = sw; cvs.height = sh; } }else{ if(cvs){ cvs.width = w; cvs.height = h; } } Debugger.log("canvasSize="+cvs.width+"x"+cvs.height); } // *************************************************************************** // Code main *********************************************************** // ここから 変数と関数は 気に入るように変更してもいいです。 function setup(){ } function main(){ update(); draw(); } function update() { } function draw() { } // --------------------------------------------------------------------------- // rendering Setting --------------------------------------------------------- setup(); frame.setFRAME(30); timer.start(main,frame.getInteval()); //setTimeout(timer.stop,3000) }