SNSをチェック

Canvas 2Dアニメーションのサンプルコード

SHARE

1. ボールのバウンドアニメーション

See the Pen canvas bound by techcode sample (@techcode-sample) on CodePen.

まず、キャンバス上でボールがバウンドする基本的なアニメーションです。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bouncing Ball</title>
  <style>
    canvas {
      display: block;
      margin: 0 auto;
      background-color: #f0f0f0;
    }
  </style>
</head>
<body>
  <canvas id="myCanvas" width="600" height="400"></canvas>
  <script>
    const canvas = document.getElementById('myCanvas');
    const ctx = canvas.getContext('2d');

    // ボールのプロパティ
    let x = canvas.width / 2;
    let y = canvas.height - 30;
    let dx = 2;
    let dy = -2;
    const ballRadius = 10;

    // ボールを描画する関数
    function drawBall() {
      ctx.beginPath();
      ctx.arc(x, y, ballRadius, 0, Math.PI * 2);
      ctx.fillStyle = "#0095DD";
      ctx.fill();
      ctx.closePath();
    }

    // 描画を更新する関数
    function draw() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      drawBall();
      
      // 壁に当たった時の反射
      if (x + dx > canvas.width - ballRadius || x + dx < ballRadius) {
        dx = -dx;
      }
      if (y + dy > canvas.height - ballRadius || y + dy < ballRadius) {
        dy = -dy;
      }

      x += dx;
      y += dy;

      requestAnimationFrame(draw);
    }

    draw();
  </script>
</body>
</html>

説明:

  • Canvasのセットアップ:
    • <canvas>タグを使ってキャンバスを設定します。
    • canvas.getContext('2d')で2Dコンテキストを取得します。
  • ボールのプロパティ:
    • ボールの初期位置(x, y)、速度(dx, dy)、および半径(ballRadius)を設定します。
  • ボールを描画する関数(drawBall):
    • ctx.beginPath()で新しいパスを開始し、ctx.arc()で円を描画します。
    • ctx.fillStyleで塗りつぶしの色を設定し、ctx.fill()で円を塗りつぶします。
  • 描画を更新する関数(draw):
    • ctx.clearRect()でキャンバスをクリアし、次のフレームを描画するために準備します。
    • ボールの位置を更新し、キャンバスの端にぶつかった場合には反射するようにします。
    • requestAnimationFrame(draw)で次のアニメーションフレームを要求します。

2. スクエアの移動アニメーション

See the Pen Untitled by techcode sample (@techcode-sample) on CodePen.

次に、キャンバス上で四角形が移動するアニメーションです。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Moving Square</title>
  <style>
    canvas {
      display: block;
      margin: 0 auto;
      background-color: #f0f0f0;
    }
  </style>
</head>
<body>
  <canvas id="myCanvas" width="600" height="400"></canvas>
  <script>
    const canvas = document.getElementById('myCanvas');
    const ctx = canvas.getContext('2d');

    // 四角形のプロパティ
    let rectX = 0;
    let rectY = 50;
    const rectWidth = 50;
    const rectHeight = 50;
    const speed = 2;

    // 四角形を描画する関数
    function drawRect() {
      ctx.beginPath();
      ctx.rect(rectX, rectY, rectWidth, rectHeight);
      ctx.fillStyle = "#0095DD";
      ctx.fill();
      ctx.closePath();
    }

    // 描画を更新する関数
    function draw() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      drawRect();
      
      // 四角形を移動
      rectX += speed;
      if (rectX + rectWidth > canvas.width || rectX < 0) {
        rectX = 0; // 左端に戻る
      }

      requestAnimationFrame(draw);
    }

    draw();
  </script>
</body>
</html>

説明:

  • 四角形のプロパティ:
    • 四角形の初期位置(rectX, rectY)、幅(rectWidth)、高さ(rectHeight)、および移動速度(speed)を設定します。
  • 四角形を描画する関数(drawRect):
    • ctx.beginPath()で新しいパスを開始し、ctx.rect()で四角形を描画します。
    • ctx.fillStyleで塗りつぶしの色を設定し、ctx.fill()で四角形を塗りつぶします。
  • 描画を更新する関数(draw):
    • ctx.clearRect()でキャンバスをクリアし、次のフレームを描画するために準備します。
    • 四角形の位置を更新し、右端に達した場合には左端に戻るようにします。
    • requestAnimationFrame(draw)で次のアニメーションフレームを要求します。

3. 円の拡大・縮小アニメーション

最後に、キャンバス上で円が拡大・縮小するアニメーションです。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Growing Circle</title>
  <style>
    canvas {
      display: block;
      margin: 0 auto;
      background-color: #f0f0f0;
    }
  </style>
</head>
<body>
  <canvas id="myCanvas" width="600" height="400"></canvas>
  <script>
    const canvas = document.getElementById('myCanvas');
    const ctx = canvas.getContext('2d');

    // 円のプロパティ
    let x = canvas.width / 2;
    let y = canvas.height / 2;
    let radius = 10;
    let growing = true;
    const maxRadius = 100;
    const minRadius = 10;
    const speed = 1;

    // 円を描画する関数
    function drawCircle() {
      ctx.beginPath();
      ctx.arc(x, y, radius, 0, Math.PI * 2);
      ctx.fillStyle = "#0095DD";
      ctx.fill();
      ctx.closePath();
    }

    // 描画を更新する関数
    function draw() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      drawCircle();
      
      // 円のサイズを更新
      if (growing) {
        radius += speed;
        if (radius >= maxRadius) {
          growing = false;
        }
      } else {
        radius -= speed;
        if (radius <= minRadius) {
          growing = true;
        }
      }

      requestAnimationFrame(draw);
    }

    draw();
  </script>
</body>
</html>

説明:

  • 円のプロパティ:
    • 円の初期位置(x, y)、初期半径(radius)、拡大・縮小フラグ(growing)、最大半径(maxRadius)、最小半径(minRadius)、および拡大・縮小速度(speed)を設定します。
  • 円を描画する関数(drawCircle):
    • ctx.beginPath()で新しいパスを開始し、ctx.arc()で円を描画します。
    • ctx.fillStyleで塗りつぶしの色を設定し、ctx.fill()で円を塗りつぶします。
  • 描画を更新する関数(draw):
    • ctx.clearRect()でキャンバスをクリアし、次のフレームを描画するために準備します。
    • 円の半径を更新し、最大半径に達した場合には縮小を開始し、最小半径に達した場合には拡大を開始します。
    • requestAnimationFrame(draw)で次のアニメーションフレームを要求します。

これらのサンプルを使用して、JavaScriptのCanvas APIを使った基本的な2Dアニメーションの作成方法を理解できます。

4. 回転する四角形アニメーション

See the Pen Untitled by techcode sample (@techcode-sample) on CodePen.

キャンバス上で四角形が中心を軸に回転するアニメーションです。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Rotating Square</title>
  <style>
    canvas {
      display: block;
      margin: 0 auto;
      background-color: #f0f0f0;
    }
  </style>
</head>
<body>
  <canvas id="myCanvas" width="600" height="400"></canvas>
  <script>
    const canvas = document.getElementById('myCanvas');
    const ctx = canvas.getContext('2d');

    // 四角形のプロパティ
    const centerX = canvas.width / 2;
    const centerY = canvas.height / 2;
    const rectSize = 50;
    let angle = 0;

    // 四角形を描画する関数
    function drawRect() {
      ctx.save();
      ctx.translate(centerX, centerY);
      ctx.rotate(angle);
      ctx.fillStyle = "#0095DD";
      ctx.fillRect(-rectSize / 2, -rectSize / 2, rectSize, rectSize);
      ctx.restore();
    }

    // 描画を更新する関数
    function draw() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      drawRect();

      // 角度を更新
      angle += 0.02;

      requestAnimationFrame(draw);
    }

    draw();
  </script>
</body>
</html>

説明:

  • 四角形のプロパティ:
    • 四角形の中心位置(centerX, centerY)、サイズ(rectSize)、および回転角度(angle)を設定します。
  • 四角形を描画する関数(drawRect):
    • ctx.save()で現在の描画状態を保存し、ctx.translate()とctx.rotate()を使って四角形を回転させます。
    • 回転後の四角形を描画し、ctx.restore()で描画状態を元に戻します。
  • 描画を更新する関数(draw):
    • キャンバスをクリアし、四角形を描画してから角度を更新し、次のフレームを要求します。

5. 星のきらめきアニメーション

See the Pen Untitled by techcode sample (@techcode-sample) on CodePen.

キャンバス上で複数の星がきらめくアニメーションです。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Twinkling Stars</title>
  <style>
    canvas {
      display: block;
      margin: 0 auto;
      background-color: black;
    }
  </style>
</head>
<body>
  <canvas id="myCanvas" width="600" height="400"></canvas>
  <script>
    const canvas = document.getElementById('myCanvas');
    const ctx = canvas.getContext('2d');

    // 星のプロパティ
    const stars = [];
    const numStars = 100;

    // 星を生成する関数
    function createStars() {
      for (let i = 0; i < numStars; i++) {
        stars.push({
          x: Math.random() * canvas.width,
          y: Math.random() * canvas.height,
          radius: Math.random() * 3 + 1,
          opacity: Math.random()
        });
      }
    }

    // 星を描画する関数
    function drawStars() {
      stars.forEach(star => {
        ctx.beginPath();
        ctx.arc(star.x, star.y, star.radius, 0, Math.PI * 2);
        ctx.fillStyle = `rgba(255, 255, 255, ${star.opacity})`;
        ctx.fill();
        ctx.closePath();
      });
    }

    // 星のきらめきを更新する関数
    function updateStars() {
      stars.forEach(star => {
        star.opacity += (Math.random() - 0.5) * 0.1;
        if (star.opacity < 0) star.opacity = 0;
        if (star.opacity > 1) star.opacity = 1;
      });
    }

    // 描画を更新する関数
    function draw() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      drawStars();
      updateStars();
      requestAnimationFrame(draw);
    }

    createStars();
    draw();
  </script>
</body>
</html>

説明:

  • 星のプロパティ:
    • 星の位置(x, y)、半径(radius)、および不透明度(opacity)を設定します。
  • 星を生成する関数(createStars):
    • numStarsの数だけランダムな星を生成して配列に格納します。
  • 星を描画する関数(drawStars):
    • 配列内のすべての星をループし、各星を描画します。
  • 星のきらめきを更新する関数(updateStars):
    • 各星の不透明度をランダムに変更して、きらめくように見せます。
  • 描画を更新する関数(draw):
    • キャンバスをクリアし、星を描画してから不透明度を更新し、次のフレームを要求します。

6. 波のアニメーション

See the Pen Untitled by techcode sample (@techcode-sample) on CodePen.

キャンバス上で波が動くアニメーションです。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Wave Animation</title>
  <style>
    canvas {
      display: block;
      margin: 0 auto;
      background-color: #f0f0f0;
    }
  </style>
</head>
<body>
  <canvas id="myCanvas" width="600" height="400"></canvas>
  <script>
    const canvas = document.getElementById('myCanvas');
    const ctx = canvas.getContext('2d');

    let waveOffset = 0;

    // 波を描画する関数
    function drawWave() {
      const amplitude = 20;
      const frequency = 0.05;
      ctx.beginPath();
      ctx.moveTo(0, canvas.height / 2);

      for (let x = 0; x < canvas.width; x++) {
        const y = canvas.height / 2 + amplitude * Math.sin((x + waveOffset) * frequency);
        ctx.lineTo(x, y);
      }

      ctx.strokeStyle = "#0095DD";
      ctx.stroke();
      ctx.closePath();
    }

    // 描画を更新する関数
    function draw() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      drawWave();
      waveOffset += 2;
      requestAnimationFrame(draw);
    }

    draw();
  </script>
</body>
</html>

説明:

  • 波のプロパティ:
    • 波の振幅(amplitude)と周波数(frequency)を設定します。
  • 波を描画する関数(drawWave):
    • ctx.beginPath()で新しいパスを開始し、ctx.moveTo()でスタート地点を設定します。
    • forループで波の各ポイントを計算し、ctx.lineTo()で線を引きます。
    • ctx.stroke()で波を描画します。
  • 描画を更新する関数(draw):
    • キャンバスをクリアし、波を描画してからオフセットを更新し、次のフレームを要求します。

これらのサンプルを使って、JavaScriptのCanvas APIを使ったさらに多様な2Dアニメーションを作成できます。各アニメーションは異なる技術を使用しているため、さまざまなアプローチを学ぶことができます。

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

前の記事

JavaScriptを使ってスクロールイベントに応じて要素が横…

次の記事

楽天市場の年間イベントと上手な買い周り方法