[目次]

キー入力に応じて移動するオブジェクト | Webプログラミング!(0000年度)

Time-stamp: "2013-02-04 Mon 22:07 JST hig"

Canvasによるアニメーションの基本

  • setInterval(描画関数名,時間(ミリ秒)) により, 一定間隔で呼び出す関数を指定できる
  • 描画関数では, 画面クリア, 描画, 時刻のインクリメントを行う

サンプル1

サンプル1

index.html


<!DOCTYPE html>
<html lang="ja">
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>Canvasのアニメーションのテスト</title>
<script type="text/javascript" src="paintcanvas.js"></script>
<script type="text/javascript">
  window.onload = function (){
  var c=document.querySelector('#canvas-id1');
  paintCanvas(c);
  }
</script>


</head>
<body>
  <h1>Canvasのテスト</h1>
  <canvas id="canvas-id1" width="400" height="320">対応していないときに表示される文字列</canvas>
</body>
</html>

paintcanvas.js




function paintCanvas(c){

    var x=10;
    var y=20;
    var dx=2;
    var dy=4;
    var ct=c.getContext('2d');

    redrawCanvas();

    function redrawCanvas(){
	ct.fillStyle="#EEEEEE";
	ct.fillRect(0,0,c.width,c.height);

	ct.fillStyle="#FF9999";
	ct.strokeStyle="blue";
	ct.beginPath();
	ct.moveTo(x,y);
	ct.lineTo(x+20,y+20);
	ct.lineTo(x+50,y+40);
	ct.closePath();
	ct.stroke();
    }

function eventKeyPressed(e){
    var letterPressed = String.fromCharCode(e.keyCode);
    letterPressed = letterPressed.toLowerCase();
    
    if( letterPressed=="s" ){
	x-=dx;
    } else if ( letterPressed=="d" ){
	x+=dx;
    } else if ( letterPressed=="x" ){
	y+=dy;
    } else if ( letterPressed=="e" ){
	y-=dy;
    }
    redrawCanvas();
}

    window.addEventListener("keyup",eventKeyPressed,true);

}


    

参考

このサイトのコンテンツ

QRcode to hig3.net

http://hig3.net