JavaScript Canvasアニメーションを紹介

Canvas 2Dを使って多様なアニメーションを作成するためのいくつかの例を紹介します。以下の例では、異なる技術や効果を使用して、Canvas上で視覚的に面白いアニメーションを作成します。

1. ランダムカラーの円の拡散アニメーション

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>Random Color Circles</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');

    // ランダムなカラーを生成する関数
    function getRandomColor() {
      const letters = '0123456789ABCDEF';
      let color = '#';
      for (let i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)];
      }
      return color;
    }

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

    // 描画を更新する関数
    function draw() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      for (let i = 0; i < 100; i++) {
        const x = Math.random() * canvas.width;
        const y = Math.random() * canvas.height;
        const radius = Math.random() * 30 + 5;
        drawCircle(x, y, radius);
      }
      requestAnimationFrame(draw);
    }

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

説明:

ランダムなカラーの生成: getRandomColor関数は、ランダムな16進カラーコードを生成します。
円の描画: drawCircle関数は、ランダムな位置と半径で円を描画します。
描画の更新: draw関数はキャンバスをクリアし、ランダムな円を描画します。

2. スパイラルアニメーション

See the Pen canvas Spiral Animation 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>Spiral 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 angle = 0;
    let radius = 1;

    // スパイラルを描画する関数
    function drawSpiral() {
      ctx.beginPath();
      ctx.moveTo(canvas.width / 2, canvas.height / 2);
      for (let i = 0; i < 1000; i++) {
        angle += 0.1;
        radius += 0.5;
        const x = canvas.width / 2 + radius * Math.cos(angle);
        const y = canvas.height / 2 + radius * Math.sin(angle);
        ctx.lineTo(x, y);
      }
      ctx.strokeStyle = "#0095DD";
      ctx.stroke();
      ctx.closePath();
    }

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

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

説明:

スパイラルの描画: drawSpiral関数は、中心から出発し、角度と半径を変化させながらスパイラルを描きます。
描画の更新: draw関数はスパイラルをキャンバスに描き、次のフレームを要求します。

3. 火花のパーティクルアニメーション

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>Spark Particle Animation</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 particles = [];
    const particleCount = 100;

    // パーティクルの初期化
    function initParticles() {
      for (let i = 0; i < particleCount; i++) {
        particles.push({
          x: canvas.width / 2,
          y: canvas.height / 2,
          speed: Math.random() * 5 + 1,
          angle: Math.random() * 2 * Math.PI,
          size: Math.random() * 5 + 1,
          color: `rgba(255, ${Math.floor(Math.random() * 255)}, 0, ${Math.random()})`
        });
      }
    }

    // パーティクルを描画する関数
    function drawParticles() {
      particles.forEach(p => {
        ctx.beginPath();
        ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
        ctx.fillStyle = p.color;
        ctx.fill();
        ctx.closePath();
      });
    }

    // パーティクルを更新する関数
    function updateParticles() {
      particles.forEach(p => {
        p.x += p.speed * Math.cos(p.angle);
        p.y += p.speed * Math.sin(p.angle);
        p.size *= 0.95;
        if (p.size < 0.1) {
          p.x = canvas.width / 2;
          p.y = canvas.height / 2;
          p.size = Math.random() * 5 + 1;
        }
      });
    }

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

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

説明:

パーティクルの初期化: initParticles関数は、火花のようなパーティクルを生成します。各パーティクルは位置、速度、角度、サイズ、および色を持ちます。
パーティクルの描画: drawParticles関数は、各パーティクルを描画します。
パーティクルの更新: updateParticles関数は、パーティクルの位置とサイズを更新し、一定以下のサイズになると再初期化します。
描画の更新: draw関数はキャンバスをクリアし、パーティクルを描画してから更新し、次のフレームを要求します。

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>Rainbow Circle 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 angle = 0;

    // 虹色の円を描画する関数
    function drawRainbowCircle() {
      ctx.save();
      ctx.translate(canvas.width / 2, canvas.height / 2);
      ctx.rotate(angle);
      for (let i = 0; i < 360; i += 10) {
        const color = `hsl(${i}, 100%, 50%)`;
        ctx.beginPath();
        ctx.arc(100 * Math.cos(i * Math.PI / 180), 100 * Math.sin(i * Math.PI / 180), 20, 0, Math.PI * 2);
        ctx.fillStyle = color;
        ctx.fill();
        ctx.closePath();
      }
      ctx.restore();
    }

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

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