[目次]
キー入力に応じて移動するオブジェクト | 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');
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);
}
参考
- 掌田津耶乃, HTML5 Webアプリケーションプログラミング入門
(第5章)
- 奥村晴彦先生 グラフを描く(canvas編)|JavaScript
