移動するオブジェクト | Webプログラミング!(0000年度)

Time-stamp: "2013-02-04 Mon 22:08 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');

    function repeatPaintCanvas(){
	ct.fillStyle="#EEEEEE";
	ct.fillRect(0,0,c.width,c.height); // c.width, c.height はHTML内

	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();
	x+=dx;
	y+=dy;
    }

    setInterval(repeatPaintCanvas,1000);//1000ミリ秒ごとにrepeatPaintCanvasを呼び出せ
}

課題

  • 国旗がCanvas内で反射して動くアニメーションを作ろう

参考

このサイトのコンテンツ

QRcode to hig3.net

http://hig3.net