はじめまして。きょんたろです。
今回は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)
}