例えばボールが右に動くということを考えるとき、画面上では最初に表示さえていたとこ頃から右側に表示され、元の位置のボールを消すことで動いたと感じることができます。

この表現は連続する定期的な画面の更新によって行います。

１　ある位置にボールを表示。
２　ボールを移動した位置に表示。これと同時に最初位置にあったボールを消す。

この動作により右に移動したと感じることができます。

動画などは連続した映像の記録により上記を表現しています。連続する映像を画面の更新という操作で実現していきます。以下を参考に実際に動かしてみます。

画面を表示します。

var canvas = document.getElementById("canvasId");
var ctx = canvas.getContext("2d");

今回はボール画像を動かします。

ボールの画像を変数に入れてつかうるようにします。

const img = new Image();
img.src = 'ball.png';

最初に表示する座標

var x = 0;
var y = 200;

動かす幅。x方向に"2"動かします。

var dx = 2;
var dy = 0;

そして動かす関数。

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  ctx.drawImage(img, x, y, 60, 30);
  x += dx;
  y += dy;
}

まず、画面を消します。

そして描画

画像の座標を更新のたびに"+"増やしていきます。この場合は"x"のみ"2"ずつ増えていくので右の方向へ更新のたびに動くように見えます。

この操作でもとの画像が’消えて右側へ座標が変わったボールが表示されます。右へ移動したように見えます。

関数を実行します。

setInterval(draw, 10);

10ミリ秒ごとにdraw関数を実行しなさい。という命令です。画面更新のたびに"座標の変更して表示、同時に前の画像を消す"を繰り返し実行します。

今では便利な関数があります。

この関数を使って実装しなおします。

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.drawImage(img, x, y, 100, 50);
  x += dx;
  y += dy;
  window.requestAnimationFrame(draw);
}

draw();