スマートフォン用にhtml5でアニメーションを記述したので備忘録

1.メインとなる処理は下記の４つ。

html5で動画を記述する場合、画像を描画>画像を保存>画像を削除　の繰り返し
clearRectでcanvas全体をクリアすることもあるが
例）ctx.clearRect(0,0,cW,cH);
できる限り変更のあった部分にフォーカスして削除した方が処理は速い。
削除　clearRect()
状態保存　save()
図形描画　fill(),stroke()
状態回復　restore()
繰り返し　setInterval()

2.html側に作ったcanvasを取得して、準備をする段階はどんな処理も同じ。

var canvas=document.getElementById('canvas');
if (!canvas||!canvas.getContext) return false;
var ctx = canvas.getContext('2d');

3.動画はsetIntervalで回す

setInterval("setMove()", 100);

4.繰り返し処理を止めるにはclearIntervalで止める

var interval_1 = setInterval("setMove()", 100);
clearInterval(interval_1);

5.マウスの座標も簡単に取得できる！

var mouseX;
var mouseY;
canvas.onmousedown = mouseDownListner;
function mouseDownListner(e) {adjustXY(e);}
//呼びだし時にマウス座標を返す関数
function adjustXY(e) {
	var rect = e.target.getBoundingClientRect();
	mouseX = e.clientX - rect.left;
	mouseY = e.clientY - rect.top;
}

例）背景画像とテキスト座標の２つを読み込んで、

ループでテキストを動かす処理。

html部分

<canvas id="canvas" width="320" height="180" style="border:1px solid #CCC;">

javascript部分

<script type="text/javascript">
//制御
var cW=320;
var cH=180;
var objX=0;
var objY=100;
//Canvas
var canvas=document.getElementById('canvas');
if (!canvas||!canvas.getContext) return false;
var ctx = canvas.getContext('2d');
setInterval("setMove()", 100);
function setMove(){
  objX = 40;
  objY = objY - 10;
  if(objY<50){
    objY = 100;
  }
  back_draw();
  draw();
}
function back_draw(){
  img_back = new Image();
  img_back.src = "http://aaa/img/back.png";
  img_back.onload = function(){
    ctx.drawImage(img_back, 0, 0);
  }
}
function draw(){
  //refresh
  ctx.clearRect(0,0,cW,cH);
  img_txt = new Image();
  img_txt.src = "http://aaa/img/txt.png";
  img_txt.onload = function(){
    ctx.drawImage(img_txt, objX, objY);
  }
}
</script>

canvas関連の参考ページ

http://blog.wonder-boys.net/?p=315
http://tech.kayac.com/archive/canvas-tutorial.html
http://blog.wonder-boys.net/?p=307
http://nosg.blog33.fc2.com/blog-entry-6.html(複数画像読み込み)
http://d.hatena.ne.jp/hebita164/20100322/1269274460
http://masudayoshihiro.jp/technology/canvas03.php（くまむし）
http://webos-goodies.jp/archives/51054671.html（画像合成）
http://murakya.net/blog/2011/03/html5-canvas-10.html