【Day5】Canvas上でアニメーションをさせるには？【QAC24】

動かしたいよね。

前回は Canvas を使って画面描画をしてみましたが、今回はその Canvas 上でアニメーションをさせてみます。

アニメーションとは、画面上の要素を時間経過とともに動かすことです。
が、そんな機能は Canvas にはありません。

ではどうするか？
そんなの簡単です。
描画して消して、描画して消して、を繰り返すだけです。

まずは消すところから

まず、現在の Canvas 上の描画を消す処理を書いてみましょう。

main.ts

window.addEventListener("DOMContentLoaded", () => {
  const canvas = document.getElementById(
    "test-canvas"
  ) as HTMLCanvasElement | null;
  if (!canvas) return;
  const ctx = canvas.getContext("2d");
  if (!ctx) return;

  ctx.fillStyle = "red";
  ctx.fillRect(10, 10, 100, 100);

  const img = new Image();
  img.src = "https://baconmockup.com/200/200/";
  img.onload = () => {
    ctx.drawImage(img, 50, 50);
    ctx.clearRect(0, 0, canvas.width, canvas.height);
  };
});

ctx.clearRect(0, 0, canvas.width, canvas.height);が描画を消す処理です。
上から 0px、左から 0px に始まり、Canvas の幅と高さ分を消します。

これを実行すると、四角形が描画された後に画像が描画され、その後に画面が消えます。
（もちろん早いので目に見えないかも。）

次に描画する

今回はベーコンではなく四角形を動かしてみましょう。
そのために、描画する座標を受け取って、描画を行う関数を作ります。

main.ts

const drawRect = (x: number, y: number) => {
  const canvas = document.getElementById(
    "test-canvas"
  ) as HTMLCanvasElement | null;
  if (!canvas) return;
  const ctx = canvas.getContext("2d");
  if (!ctx) return;
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillStyle = "red";
  ctx.fillRect(x, y, 100, 100);
};

window.addEventListener("DOMContentLoaded", () => {
  drawRect(10, 10);
});

drawRect関数は、引数として x 座標と y 座標を受け取り、まずキャンバスをクリアしてから、四角形を描画します。
さっきまでの四角形描画のコードをほとんど移しただけです。

ちなみに、TypeScript では引数に対して型を指定しなければ、暗黙的にany型として扱われます。
any型はどんな型でも受け付けるため、型安全が保証されません。そのため、引数には型を指定しましょう。

さて、動かす

動かすためには、描画する座標を変更する必要があります。
そこで、setInterval関数を使って、一定時間ごとに座標を変更するようにします。

main.ts

window.addEventListener("DOMContentLoaded", () => {
  let x = 10;
  let y = 10;
  setInterval(() => {
    x += 1;
    y += 1;
    drawRect(x, y);
  }, 1000 / 60);
});

まず、x 座標と y 座標を管理する変数xとyを定義します。
初期値として 10 を代入しています。

setInterval関数は、第一引数に実行する関数、第二引数に実行する間隔をミリ秒で指定します。
今回の1000 / 60は、1 秒間に 60 回実行することを意味します。つまり 60FPS ってこったな。

60FPS の間隔で、x 座標と y 座標を 1 ずつ増やして、四角形を描画する関数drawRectを増やされたxとyを渡して呼び出しています。

なんとこれで、Canvas 上でアニメーションを実装することが出来ました。
理論上は、この方法を使えばあらゆる描画が行えると思います。

もっと詳しく Canvas について知りたい人は以下の記事が参考になるかと思います。

これは、MDN というサイトで公開されている Canvas API のチュートリアルです。
このサイトは、初心者にはもしかしたらとっつきにくいかもしれませんが、優秀どころか最強サイトなので、ぜひ一度覗いてみてください。

それでは、次回以降はもう Canvas は出来てるものだと思って進めていきますぜ？兄貴...