[目次]
移動するオブジェクト | Webプログラミング!(2021年度)
Canvasによるアニメーションの基本
- setInterval(描画関数名,時間(ミリ秒)) により, 一定間隔で呼び出す関数を指定できる
- 描画関数では, 画面クリア, 描画, 時刻のインクリメントを行う
サンプル1
サンプル1index.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内で反射して動くアニメーションを作ろう
参考
- 掌田津耶乃, HTML5 Webアプリケーションプログラミング入門
(第5章)
- 奥村晴彦先生 グラフを描く(canvas編)|JavaScript
