HTML5 2

キーの取得

キーが押された時に何かの処理を実行するには、実行される関数を以下のイベントハンドラに登録しておきます。

onkeydown

キーが押されたときに実行される関数を登録する

onkeyup

キーが離されたときに実行される関数を登録する

onkeypress

キーが押され続けたときに実行される関数を登録する

登録しておく関数には、引数が１つあります。その引数のkeyCodeの値を得ることによって、押されたキーのコードを調べることができます。

キーの取得の例


<!DOCTYPE html>
<html>
<head>
<title>Canvasサンプル6</title>
<meta charset="UTF-8">
</head>
<body>
<h1>Canvasサンプル6</h1>
<canvas id="canvas6" width=300 height=300></canvas>
<script type="text/javascript">
var canvas = document.getElementById("canvas6");
var context = canvas.getContext("2d");

var rightDown = false;
var upDown = false;
var leftDown = false;
var downDown = false;

var rx = 100;
var ry = 100;
context.fillRect(rx, ry, 20, 20);

function onKeyDown(evt) {
	if (evt.keyCode == 39)
		rightDown = true;
	else if (evt.keyCode == 37)
		leftDown = true;
	else if (evt.keyCode == 38)
		upDown = true;
	else if (evt.keyCode == 40)
		downDown = true;
}

function onKeyUp(evt) {
	if (evt.keyCode == 39)
		rightDown = false;
	else if (evt.keyCode == 37)
		leftDown = false;
	else if (evt.keyCode == 38)
		upDown = false;
	else if (evt.keyCode == 40)
		downDown = false;
}

document.onkeydown = onKeyDown;
document.onkeyup = onKeyUp;

function draw() {
	context.clearRect(0, 0, canvas.width, canvas.height);
	if(rightDown == true)
		rx += 5;
	else if(upDown == true)
		ry -= 5;
	else if(leftDown == true)
		rx -= 5;
	else if(downDown == true)
		ry += 5;
	context.fillRect(rx, ry, 20, 20);
}
setInterval(draw, 10);
</script>
</body>
</html>

HTML解説

練習問題

アニメーションの停止

setInterval()関数の戻り値を、clearInterval()関数の引数に与えて実行することによって、アニメーションを停止することができます。


var id = setInterval(draw, 10); // アニメーション開始
clearInterval(id); // アニメーション停止