初心者でも分かる！JavaScriptで図形アニメーションを作る5つの方法

はじめに
●JavaScriptで図形を描く方法
- ○HTML5のcanvas要素について
- ○JavaScriptでcanvasに図形を描く基本
●アニメーションを作成する方法
- ○requestAnimationFrame関数の使い方
●サンプルコード1：簡単な円形アニメーション
- このコードの説明
●サンプルコード2：四角形を動かすアニメーション
- このコードの説明
●サンプルコード3：図形の大きさを変えるアニメーション
- このコードの説明
●サンプルコード4：線を描くアニメーション
- このコードの説明
●サンプルコード5：複数の図形を組み合わせたアニメーション
- このコードの説明
●注意点と対処法
●カスタマイズ方法
まとめ

はじめに

この記事を読めば、初心者でもJavaScriptで図形アニメーションを作成することができるようになります。

具体的なサンプルコードとともに、図形の描画方法やアニメーションの作成方法を分かりやすく解説しています。

また、注意点や対処法、カスタマイズ方法も紹介しますので、ぜひ参考にしてください。

●JavaScriptで図形を描く方法

○HTML5のcanvas要素について

HTML5では、図形やアニメーションを描画するためのcanvas要素が導入されました。

canvas要素は、HTML内に埋め込むことができ、JavaScriptを使って簡単に図形を描くことができます。

canvas要素を利用するには、まずHTMLファイルにcanvasタグを追加して、id属性を付けておきましょう。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>図形を描くサンプル</title>
</head>
<body>
  <canvas id="myCanvas" width="500" height="500"></canvas>
  <script src="script.js"></script>
</body>
</html>

○JavaScriptでcanvasに図形を描く基本

canvasに図形を描くには、まずJavaScriptでcanvas要素を取得し、描画コンテキストを取得します。

描画コンテキストには、図形や色、線の太さなどを設定する機能が備わっています。

下記のサンプルコードでは、赤い四角形を描いています。

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

ctx.fillStyle = 'red';
ctx.fillRect(50, 50, 100, 100);

このコードでは、まずcanvas要素を取得し、2D描画コンテキストを取得しています。

次に、fillStyleプロパティに色を設定し、fillRectメソッドを使って四角形を描画しています。

●アニメーションを作成する方法

○requestAnimationFrame関数の使い方

アニメーションを作成するには、requestAnimationFrame関数を利用します。

この関数は、ブラウザに次の描画タイミングで指定した関数を実行するように依頼する機能を提供しています。

アニメーションを作成するには、requestAnimationFrame関数を再帰的に呼び出すことで、繰り返し描画処理を実行するようにします。

下記のサンプルコードでは、円形アニメーションを作成しています。

●サンプルコード1：簡単な円形アニメーション

このコードでは、requestAnimationFrame関数を使って、円をアニメーションさせるコードを紹介しています。

この例では、円の位置を徐々に変化させてアニメーションを表現しています。

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

let x = 50;
let y = 50;
const radius = 25;
const speed = 1;

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

  ctx.beginPath();
  ctx.arc(x, y, radius, 0, Math.PI * 2);
  ctx.fillStyle = 'blue';
  ctx.fill();
  ctx.closePath();

  x += speed;
  y += speed;

  requestAnimationFrame(drawCircle);
}

drawCircle();

このコードの説明

canvas要素を取得し、2D描画コンテキストを取得します。
円の座標(x, y)、半径(radius)、移動速度(speed)を定義します。
drawCircle関数を定義します。
この関数では、次の処理を行います。
a. canvasをクリアします。
b. 円を描画するためのパスを開始し、arcメソッドを使って円を描画し、fillメソッドで塗りつぶします。
c. 座標を移動速度分だけ変更します。
d. requestAnimationFrameを使って、drawCircle関数を次の描画タイミングで呼び出します。
drawCircle関数を初回実行します。
これによりアニメーションが開始されます。

続いて、四角形を動かすアニメーションのサンプルコードです。

●サンプルコード2：四角形を動かすアニメーション

このコードでは、requestAnimationFrame関数を使用して、四角形を動かすアニメーションを作成しています。

この例では、四角形の座標を変更してアニメーションを実現しています。

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

let x = 50;
let y = 50;
const width = 50;
const height = 50;
const speed = 2;

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

  ctx.fillStyle = 'green';
  ctx.fillRect(x, y, width, height);

  x += speed;
  y += speed;

  requestAnimationFrame(drawRectangle);
}

drawRectangle();

このコードの説明

canvas要素を取得し、2D描画コンテキストを取得します。
四角形の座標(x, y)、幅(width)、高さ(height)、移動速度(speed)を定義します。
drawRectangle関数を定義します。
この関数では、次の処理を行います。
a. canvasをクリアします。
b. 四角形の色を設定し、fillRectメソッドで四角形を描画します。
c. 座標を移動速度分だけ変更します。
d. requestAnimationFrameを使って、drawRectangle関数を次の描画タイミングで呼び出します。
drawRectangle関数を初回実行します。これによりアニメーションが開始されます。

次に、図形の大きさを変えるアニメーションのサンプルコードです。

●サンプルコード3：図形の大きさを変えるアニメーション

このコードでは、requestAnimationFrame関数を使用して、図形の大きさが変化するアニメーションを作成しています。

この例では、円の半径を徐々に変更することで、アニメーションを実現しています。

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

const x = canvas.width / 2;
const y = canvas.height / 2;
let radius = 25;
const maxRadius = 100;
const minRadius = 25;
const radiusChange = 1;

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

  ctx.beginPath();
  ctx.arc(x, y, radius, 0, Math.PI * 2);
  ctx.fillStyle = 'purple';
  ctx.fill();
  ctx.closePath();

  radius += radiusChange;
  if (radius > maxRadius || radius < minRadius) {
    radiusChange = -radiusChange;
  }

  requestAnimationFrame(drawResizingCircle);
}

drawResizingCircle();

このコードの説明

canvas要素を取得し、2D描画コンテキストを取得します。
円の座標(x, y)、半径(radius)、最大半径(maxRadius)、最小半径(minRadius)、半径の変化量(radiusChange)を定義します。
drawResizingCircle関数を定義します。
この関数では、次の処理を行います。
a. canvasをクリアします。
b. 円を描画するためのパスを開始し、arcメソッドを使って円を描画し、fillメソッドで塗りつぶします。
c. 半径を変化量分だけ変更します。半径が最大半径または最小半径に達したら、変化量を反転させます。
d. requestAnimationFrameを使って、drawResizingCircle関数を次の描画タイミングで呼び出します。
drawResizingCircle関数を初回実行します。これによりアニメーションが開始されます。

次に、線を描くアニメーションのサンプルコードです。

●サンプルコード4：線を描くアニメーション

このコードでは、requestAnimationFrame関数を利用して、線が徐々に描かれるアニメーションを作成する方法を紹介しています。

この例では、線の終点の座標を徐々に変更することで、アニメーションを実現しています。

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

const startX = 50;
const startY = 50;
let endX = startX;
let endY = startY;
const speed = 2;

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

  ctx.beginPath();
  ctx.moveTo(startX, startY);
  ctx.lineTo(endX, endY);
  ctx.strokeStyle = 'blue';
  ctx.lineWidth = 3;
  ctx.stroke();
  ctx.closePath();

  endX += speed;
  endY += speed;

  if (endX > canvas.width || endY > canvas.height) {
    endX = startX;
    endY = startY;
  }

  requestAnimationFrame(drawLineAnimation);
}

drawLineAnimation();

このコードの説明

canvas要素を取得し、2D描画コンテキストを取得します。
線の始点(startX, startY)、終点(endX, endY)、移動速度(speed)を定義します。
drawLineAnimation関数を定義します。
この関数では、次の処理を行います。
a. canvasをクリアします。
b. 線を描画するためのパスを開始し、moveToメソッドで始点に移動し、lineToメソッドで終点まで線を引きます。
strokeStyleとlineWidthで線の色と太さを設定し、strokeメソッドで線を描画します。
c. 線の終点を移動速度分だけ変更します。
終点がcanvasの範囲を超えたら、終点を始点に戻します。
d. requestAnimationFrameを使って、drawLineAnimation関数を次の描画タイミングで呼び出します。
drawLineAnimation関数を初回実行します。これによりアニメーションが開始されます。

次に、複数の図形を組み合わせたアニメーションのサンプルコードです。

●サンプルコード5：複数の図形を組み合わせたアニメーション

このコードでは、requestAnimationFrame関数を利用して、複数の図形を組み合わせたアニメーションを作成する方法を紹介しています。

この例では、円と四角形を同時に動かすアニメーションを実現しています。

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

const circle = { x: 50, y: 50, radius: 25, speedX: 2, speedY: 2 };
const rectangle = { x: 100, y: 100, width: 50, height: 50, speedX: -2, speedY: 2 };

function drawCircle() {
  ctx.beginPath();
  ctx.arc(circle.x, circle.y, circle.radius, 0, Math.PI * 2);
  ctx.fillStyle = 'red';
  ctx.fill();
  ctx.closePath();
}

function drawRectangle() {
  ctx.beginPath();
  ctx.rect(rectangle.x, rectangle.y, rectangle.width, rectangle.height);
  ctx.fillStyle = 'blue';
  ctx.fill();
  ctx.closePath();
}

function updatePosition() {
  circle.x += circle.speedX;
  circle.y += circle.speedY;
  rectangle.x += rectangle.speedX;
  rectangle.y += rectangle.speedY;
}

function checkBounds() {
  if (circle.x + circle.radius > canvas.width || circle.x - circle.radius < 0) {
    circle.speedX = -circle.speedX;
  }
  if (circle.y + circle.radius > canvas.height || circle.y - circle.radius < 0) {
    circle.speedY = -circle.speedY;
  }

  if (rectangle.x + rectangle.width > canvas.width || rectangle.x < 0) {
    rectangle.speedX = -rectangle.speedX;
  }
  if (rectangle.y + rectangle.height > canvas.height || rectangle.y < 0) {
    rectangle.speedY = -rectangle.speedY;
  }
}

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

  drawCircle();
  drawRectangle();

  updatePosition();
  checkBounds();

  requestAnimationFrame(animate);
}

animate();

このコードの説明

canvas要素を取得し、2D描画コンテキストを取得します。
円と四角形の座標、サイズ、移動速度をオブジェクトで定義します。
drawCircle関数とdrawRectangle関数を定義し、それぞれ円と四角形を描画します。
updatePosition関数で円と四角形の座標を更新します。
checkBounds関数で円と四角形がcanvasの範囲内に収まるように、必要に応じて移動速度を反転させます。
animate関数を定義し、canvasをクリアし、円と四角形を描画し、座標を更新し、範囲チェックを行います。最後にrequestAnimationFrameでanimate関数を次の描画タイミングで呼び出します。
animate関数を初回実行して、アニメーションを開始しています。

●注意点と対処法

○ブラウザ間の互換性

異なるブラウザでアニメーションが正しく表示されるように、互換性を考慮する必要があります。

例えば、requestAnimationFrame関数は一部の古いブラウザではサポートされていないため、その場合はsetTimeoutを使用した代替方法を用意しておくとよいでしょう。

○パフォーマンス

複数の図形や大量のアニメーション要素がある場合、パフォーマンスが低下することがあります。

パフォーマンスの改善策として、不要な再描画を減らす、画像や図形の最適化を行う、レイヤーを分けるなどの方法があります。

○座標系と変換

canvas要素で図形を描画する際、座標系や変換が重要な役割を果たします。

座標系を正しく理解し、必要な場合はtranslate, rotate, scaleなどの変換を適切に行いましょう。

○レスポンシブデザイン

デバイスの画面サイズや解像度が異なる場合でも、アニメーションが適切に表示されるようにレスポンシブデザインを考慮することが重要です。

canvas要素のサイズを動的に変更することで対応できます。

●カスタマイズ方法

色やスタイルの変更：fillStyle, strokeStyle, lineWidthなどのプロパティを変更して、図形の色や線のスタイルをカスタマイズできます。
図形の追加や変更：円や四角形以外にも、三角形や多角形を描画したり、カスタムパスを作成して独自の図形を描くことができます。
インタラクティブな要素の追加：マウスイベントやタッチイベントを利用して、ユーザーとインタラクションできるアニメーションを作成できます。
エフェクトの追加：グラデーションやシャドウを利用して、図形にリッチなエフェクトを追加できます。