キーを押すことによって、図形を移動してみましょう。
<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>
var rightDown = false;
var upDown = false;
var leftDown = false;
var downDown = false;
var rx = 100;
var ry = 100;
function onKeyDown(evt) {
if (evt.keyCode == 39)
else if (evt.keyCode == 37)
else if (evt.keyCode == 38)
else if (evt.keyCode == 40)
function onKeyUp(evt) {
document.onkeydown = onKeyDown;
document.onkeyup = onKeyUp;
setInterval()関数の戻り値を、clearInterval()関数の引数に与えて実行することによって、 アニメーションを停止することができます。
var id = setInterval(draw, 10); // アニメーション開始
clearInterval(id); // アニメーション停止