【Canvas入門】JavaScriptで必殺技を描くアニメーションを作ってみた

1.はじめに

「JavaScriptとCanvasで、カメハメハを撃てないだろうか？」
そんな発想から始まった今回の“ちょっとネタだけど、ちゃんと学べる”企画です。

HTMLの<canvas>とJavaScriptを使って、波動（エネルギー弾）を描画し、飛ばし、最後には爆発させるというミニアニメーションを作っていきます。

Canvasは初心者には少しハードルが高く見えるかもしれませんが、この記事では1ステップずつ順を追って、楽しく・丁寧に解説していきます。

最終的には、クリックで何度でもカメハメハが撃てる状態にする予定です。

では、まずはその第一歩として、Canvasの描画エリアを作り、画面に「エネルギーの種」を描いてみましょう！

2.書き方（canvasの基本構造）

JavaScriptで描画をするには、まずHTMLに<canvas>タグを設置し、それをJavaScriptから操作することで描画が可能になります。

canvasは「描画用の箱」のようなもので、2D・3Dのグラフィックを自由に描けるのが特長です。

ここではまず、黒背景のキャンバスを画面いっぱいに広げる基本のセットアップをやってみましょう。

コード例：Canvasの基本構造

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Canvasで描画</title>
  <style>
    body {
      margin: 0;
      overflow: hidden;
      background: black;
    }
    canvas {
      display: block;
    }
  </style>
</head>
<body>
  <canvas id="canvas"></canvas>

  <script>
    const canvas = document.getElementById("canvas");
    const ctx = canvas.getContext("2d");

    // 画面全体にフィットさせる
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
  </script>
</body>
</html>

解説ポイント

<canvas> タグにはid属性を付けて、JSから操作できるようにしています。
getContext("2d") は「2D描画モードで使うよ」という意味です。
canvas.width と canvas.height に window.innerWidth / innerHeight を指定すると、ブラウザ全体をキャンバスとして使えます。

3.円の描画（波動の種を描いてみよう）

Canvasの準備ができたら、次は**波動の元になる「エネルギーの種」**を描いてみましょう。

ここでは、JavaScriptで円を描く基本的な方法を使って、画面中央に青いエネルギー球を表示します。

ポイントとなる関数：ctx.arc()

arc() は円や弧を描くための関数です。

ctx.beginPath();
ctx.arc(x, y, 半径, 開始角度, 終了角度);
ctx.fill();

x, y：円の中心座標
半径：円の大きさ
開始角度・終了角度：ラジアン指定（0〜Math.PI * 2 で1周）

コード例：画面中央にエネルギー球を描く

<script>
  const canvas = document.getElementById("canvas");
  const ctx = canvas.getContext("2d");
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;

  const x = canvas.width / 2;
  const y = canvas.height / 2;
  const radius = 30;

  ctx.fillStyle = "cyan";
  ctx.beginPath();
  ctx.arc(x, y, radius, 0, Math.PI * 2);
  ctx.fill();
</script>

表示結果

解説ポイント

fillStyle = "cyan" で波動の色を設定（光っぽい青）
beginPath() でパス（図形の枠）を開始
arc() で円を定義
fill() で塗りつぶして表示

これで、画面中央に光るエネルギー球が現れたはずです。
次はこの球を右に向かって飛ばして、波動らしくアニメーションさせていきましょう！

4.波動を飛ばす（アニメーションの基本）

エネルギー球が表示できたら、次は**「スーッ」と右に飛んでいくように動かしてみましょう。**

JavaScriptでcanvasの描画をアニメーションさせるには、requestAnimationFrame()という関数を使います。
この関数は、毎フレームごとに関数を実行するという仕組みをもっていて、アニメやゲームのような表現に最適です。

コード例：波動を右に飛ばす

<script>
  const canvas = document.getElementById("canvas");
  const ctx = canvas.getContext("2d");
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;

  let x = 100;
  const y = canvas.height / 2;
  const radius = 30;
  const speed = 5;

  function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height); // 前の絵を消す

    ctx.fillStyle = "cyan";
    ctx.beginPath();
    ctx.arc(x, y, radius, 0, Math.PI * 2);
    ctx.fill();

    x += speed;

    if (x - radius < canvas.width) {
      requestAnimationFrame(draw); // 次のフレームを予約
    }
  }

  draw(); // 実行
</script>

表示結果（リロードしてみてください）

解説ポイント

clearRect()：前の描画を消さないと、軌跡のように残ってしまう
x += speed;：毎フレーム少しずつ右に動かす
requestAnimationFrame(draw)：なめらかにループするためのおまじない

このように、短いコードでも滑らかなアニメーションが作れるのがCanvasの面白いところ。
波動の形がスッと進んでいくだけでも、技っぽさが出てきますね！

5.爆発させてみよう（パーティクルエフェクト＋連続発射対応）

波動が飛んでいくだけでも楽しいですが、今回はさらに演出を加えて**「爆発エフェクト」**を実装してみましょう。

そして、どうせなら何度でも撃ちたい！
ということで、クリックするたびに何発でも撃てるように改良していきます。

💡 やることまとめ

波動が画面右端に到達したら爆発
複数の小さな粒子（パーティクル）を生成して、爆風っぽく散らす
クリックごとに新しい波動を発射できる

コード例：連続で撃てる＋爆発あり

<script>
  const canvas = document.getElementById("canvas");
  const ctx = canvas.getContext("2d");
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;

  const waves = [];

  canvas.addEventListener("click", () => {
    waves.push({
      x: 100,
      y: canvas.height / 2,
      r: 30,
      speed: 6,
      exploded: false,
      particles: []
    });
  });

  function createExplosion(wave) {
    for (let i = 0; i < 50; i++) {
      wave.particles.push({
        x: wave.x,
        y: wave.y,
        dx: (Math.random() - 0.5) * 10,
        dy: (Math.random() - 0.5) * 10,
        radius: Math.random() * 3 + 1,
        alpha: 1
      });
    }
  }

  function updateWave(wave) {
    if (!wave.exploded) {
      wave.x += wave.speed;

      ctx.shadowColor = "cyan";
      ctx.shadowBlur = 25;
      const grad = ctx.createRadialGradient(wave.x, wave.y, 0, wave.x, wave.y, wave.r);
      grad.addColorStop(0, "white");
      grad.addColorStop(1, "cyan");

      ctx.fillStyle = grad;
      ctx.beginPath();
      ctx.arc(wave.x, wave.y, wave.r, 0, Math.PI * 2);
      ctx.fill();

      if (wave.x > canvas.width - 150) {
        wave.exploded = true;
        createExplosion(wave);
      }
    } else {
      wave.particles.forEach(p => {
        p.x += p.dx;
        p.y += p.dy;
        p.alpha -= 0.02;

        ctx.beginPath();
        ctx.fillStyle = `rgba(255, 100, 0, ${p.alpha})`;
        ctx.arc(p.x, p.y, p.radius, 0, Math.PI * 2);
        ctx.fill();
      });
    }
  }

  function animate() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    waves.forEach(wave => updateWave(wave));
    requestAnimationFrame(animate);
  }

  animate();
</script>

表示結果（クリックで発射）

解説ポイント

waves[] に波動の情報をどんどん追加できるように
各波動が個別にアニメーション＆爆発
パーティクルごとに透明度（alpha）を減らすことでフェードアウト
requestAnimationFrame() で全体をなめらかにループ処理

この仕組みによって、**クリック連打で連続発射！爆発！また発射！**という派手なエフェクトが実現できます。

コード自体は意外とシンプルなのに、表現の幅は一気に広がるのがcanvasとJSの魅力です。

6.まとめ（この仕組みで何が学べるか）

今回は、JavaScriptとCanvasを使って「カメハメハを撃つ」演出をゼロから作ってきました。

初めは小さな青いエネルギー球を描くだけでしたが、そこからアニメーション、爆発、連続発射と発展させることで、かなり本格的な表現ができるようになりました。

この演出で学べたこと

技術	学べた内容
`<canvas>`	グラフィック描画の基礎
`arc()`	円（波動）を描画する方法
`requestAnimationFrame()`	スムーズなアニメーション処理
`clearRect()`	毎フレームのリセット処理
`shadowBlur` / `shadowColor`	光るような演出の作り方
パーティクル処理	爆発の粒子アニメーションの基礎
イベント処理	クリックに反応して何かを起こす仕組み

この知識はこう応用できる

ゲーム演出（必殺技、弾、爆発など）
アニメーション付きのUIや演出（エフェクト、通知など）
インタラクティブな教材やポートフォリオ演出
「ちょっとネタだけど学べる」技術系コンテンツの企画

次のチャレンジに向けて

ここまでできたら、あとはあなたのアイデア次第で無限に広がります！
たとえば…

元気玉にして、長押しでチャージ→放つ！

波動が敵キャラに当たるようにして、HPを削る演出を追加

技を選べるメニュー画面を作って「必殺技セレクト」へ！

JavaScriptのcanvasは、「描く × 動かす × 反応させる」を全部組み合わせられる楽しい世界です。

ネタをきっかけに、プログラミングの本質的な面白さを感じてもらえたら嬉しいです！