HTML キャンバスグラフィックのマスター

はじめに

HTMLの<canvas>タグは、Webページ上にグラフィックやその他の視覚要素を描画するために使用されます。このタグは、開発者がJavaScriptを使ってゲーム、画像、アニメーションを作成するためのプラットフォームを提供します。キャンバス要素には、キャンバスのサイズ、不透明度、外観を操作するためのさまざまな属性があります。

この実験では、HTMLの<canvas>タグを使ってグラフィックを作成し、アニメーションを追加し、JavaScriptを使って形状やテキストを操作する方法を探ります。

注: index.htmlでコーディングを練習し、Visual Studio CodeでHTMLを書く方法を学ぶことができます。画面右下の「Go Live」をクリックして、ポート8080でWebサービスを実行します。その後、Web 8080タブを更新してWebページをプレビューできます。

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/AdvancedElementsGroup(["Advanced Elements"]) html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html(("HTML")) -.-> html/LayoutandSectioningGroup(["Layout and Sectioning"]) html(("HTML")) -.-> html/MultimediaandGraphicsGroup(["Multimedia and Graphics"]) html/BasicStructureGroup -.-> html/basic_elems("Basic Elements") html/BasicStructureGroup -.-> html/head_elems("Head Elements") html/LayoutandSectioningGroup -.-> html/layout("Layout Elements") html/LayoutandSectioningGroup -.-> html/doc_flow("Document Flow Understanding") html/MultimediaandGraphicsGroup -.-> html/multimedia("Multimedia Elements") html/MultimediaandGraphicsGroup -.-> html/embed_media("Embedding External Media") html/AdvancedElementsGroup -.-> html/inter_elems("Interactive and Dynamic Elements") subgraph Lab Skills html/basic_elems -.-> lab-70719{{"HTML グラフィック描画"}} html/head_elems -.-> lab-70719{{"HTML グラフィック描画"}} html/layout -.-> lab-70719{{"HTML グラフィック描画"}} html/doc_flow -.-> lab-70719{{"HTML グラフィック描画"}} html/multimedia -.-> lab-70719{{"HTML グラフィック描画"}} html/embed_media -.-> lab-70719{{"HTML グラフィック描画"}} html/inter_elems -.-> lab-70719{{"HTML グラフィック描画"}} end

シンプルなキャンバスの作成

コンテンツを一切持たない<canvas>タグを使って、シンプルなキャンバスを作成しましょう。index.htmlファイルに次のコードを記述します。

<!doctype html>
<html>
  <head>
    <title>Simple Canvas</title>
  </head>

  <body>
    <canvas id="myCanvas"></canvas>
  </body>
</html>

ファイルを保存し、ブラウザで開きます。ページ上に空白の領域が表示されるのがわかります。これが、デフォルトの幅が300px、高さが150pxのキャンバスです。

キャンバスにスタイルを追加する

style属性を使って、キャンバスにスタイルを追加することができます。キャンバスの境界を視認できるように、キャンバスにボーダーを追加しましょう。

<!doctype html>
<html>
  <head>
    <title>Styled Canvas</title>
  </head>

  <body>
    <canvas id="myCanvas" style="border: 1px solid black;"></canvas>
  </body>
</html>

ファイルを保存し、ブラウザを更新して結果を確認しましょう。

キャンバス上に図形を作成する

次に、キャンバスにいくつかのグラフィックを追加しましょう。これを行うには、JavaScriptを使用する必要があります。getContext()メソッドを使って、キャンバスの2次元描画コンテキストを取得し、それに対して様々な操作を行うことができます。

<!doctype html>
<html>
  <head>
    <title>Shapes on Canvas</title>
  </head>

  <body>
    <canvas id="myCanvas" style="border: 1px solid black;"></canvas>
    <script>
      const canvas = document.getElementById("myCanvas");
      const ctx = canvas.getContext("2d");

      // Draw a rectangle
      ctx.fillStyle = "red";
      ctx.fillRect(50, 50, 100, 50);
    </script>
  </body>
</html>

上記のコードでは、まずID「myCanvas」でキャンバス要素を取得し、その後getContext()を使って2次元描画コンテキストを取得します。そして、四角形を赤色で塗りつぶすためにfillStyleプロパティを「red」に設定します。最後に、fillRect()メソッドを使って四角形を描画します。

ファイルを保存し、ブラウザを更新して結果を確認しましょう。

キャンバスにテキストを追加する

JavaScriptを使って、キャンバスにいくつかのテキストを追加しましょう。

<!doctype html>
<html>
  <head>
    <title>Text on Canvas</title>
  </head>

  <body>
    <canvas id="myCanvas" style="border: 1px solid black;"></canvas>
    <script>
      const canvas = document.getElementById("myCanvas");
      const ctx = canvas.getContext("2d");

      // Add text
      ctx.font = "30px Arial";
      ctx.fillStyle = "blue";
      ctx.fillText("Hello World", 50, 100);
    </script>
  </body>
</html>

上記のコードでは、まずID「myCanvas」でキャンバス要素を取得し、その後getContext()を使って2次元描画コンテキストを取得します。そして、fontプロパティを「30px Arial」に、fillStyleプロパティを「blue」に設定します。最後に、fillText()メソッドを使って「Hello World」のテキストを追加します。

ファイルを保存し、ブラウザを更新して結果を確認しましょう。

キャンバス上でのグラフィックのアニメーション化

JavaScriptとHTMLの<canvas>タグを使って、キャンバス上でアニメーションを作成することもできます。キャンバス上で移動する四角形のアニメーションを作成しましょう。

<!doctype html>
<html>
  <head>
    <title>Animated Canvas</title>
  </head>

  <body>
    <canvas id="myCanvas" style="border: 1px solid black;"></canvas>
    <script>
      const canvas = document.getElementById("myCanvas");
      const ctx = canvas.getContext("2d");

      let x = 20;
      let y = 20;
      const dx = 5;

      function animate() {
        requestAnimationFrame(animate);
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.fillStyle = "red";
        ctx.fillRect(x, y, 50, 50);

        if (x + 50 > canvas.width || x < 0) {
          dx = -dx;
        }

        x += dx;
      }

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

上記のコードでは、まずID「myCanvas」でキャンバス要素を取得し、その後getContext()を使って2次元描画コンテキストを取得します。そして、四角形の位置を保持するための変数xとyを宣言します。また、四角形をx軸に沿って移動させるための変数dxも宣言します。

次に、画面上に四角形を描画するための関数animate()を作成します。各フレームでキャンバス上の前の描画をクリアするためにclearRect()メソッドを使用します。そして、fillRect()メソッドを使って四角形を赤色で塗りつぶします。

その後、四角形がキャンバスの境界に達したかどうかを確認し、そうであればdxの値を変えることで移動方向を変えます。

最後に、アニメーション用のループを作成するためにrequestAnimationFrame()メソッドを呼び出します。

ファイルを保存し、ブラウザを更新してアニメーションされた四角形を確認しましょう。

まとめ

この実験では、HTMLの<canvas>タグを使ってWebページ上でグラフィックとアニメーションを作成する方法を学びました。また、属性とスタイルを使ってキャンバスのサイズ、不透明度、外観を操作する方法も学びました。JavaScriptとgetContext()メソッドを使って、キャンバス上に図形、テキスト、アニメーションを追加しました。