Zenn
AIQ Tech Blog (有志)Publicationへの投稿
🖼️

JavaScriptのCanvasの基本的な使い方と参考になる情報まとめ

まさぴょん
2023/08/26に公開
JavaScript
Web
webデザイン
canvas
techblog
tech

こんにちは、AIQ株式会社のフロントエンドエンジニアのまさぴょんです！
今回は、JavaScriptのCanvasの基本的な使い方と参考になる情報まとめについて、解説します。

Canvasとは？

Canvasとは、HTML の要素(<canvas>タグ)であり、JavaScriptを使って、グラフィックを描くことができるHTML要素になります。

JavaScriptの CanvasAPIを利用すると、canvasタグに、線や円など図形を描いたり、グラフを描いたり、写真を合成したり、グラフィックなことがいろいろできます。

またCanvasの消去と再描画を繰り返すことで、アニメーションを作成することもできます。

Canvasの基本的な使い方

ここからは、具体的な Canvasの使い方を説明していきます。

今回作成する目標物(Sample)

今回作成する目標物は、Canvasに、Tシャツの画像を描画して、その上に、赤い半透明の四角形を表示していきます。

ハンズオンのために、Tシャツの画像データをここに貼っておきます。
Downloadして、ぜひ動作確認に使ってください。

Canvasに描画するための手順・Flow

まずは、Canvasに描画するための手順・Flowをまとめると、次のとおりです。

  1. DOM内に、Canvas要素を作成する。
  2. Canvas要素を取得する。
  3. Canvas要素のサイズを設定する。
  4. Canvas要素からコンテキストを取得する。
  5. コンテキスト内の設定をする。
  6. コンテキストを使用して、目的物を描画する。

Canvasの使い方 SampleCode

Canvasの使い方の SampleCodeは、次のとおりです。

Canvasに描画するための手順・Flowの番号の Stepと Code中の番号は対応しています。

Canvas-APIのメソッドや、プロパティの紹介は、別途します。

canvas_test.html
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div>
      <!-- 1. Base となる Canvas要素 -->
      <canvas id="canvas"> </canvas>
    </div>
    <script>
      /** 2. Base となる Canvas要素を取得する */
      const canvas = document.getElementById("canvas");

      // 3. Canvas要素のサイズを設定する。
      canvas.setAttribute("width", "200");
      canvas.setAttribute("height", "200");

      // Canvasに合成したい画像を設定する
      const imagePath = "t-shirt.jpeg";
      const image = new Image();
      image.src = imagePath;

      // 画像が読み込まれた後に実行される処理
      image.onload = () => {
        /**
         * 4. Canvas要素からコンテキストを取得する。
         * => キャンバスへの描画は、コンテキスト（CanvasRenderingContext2Dインスタンス）経由でおこないます。
         * => 今回は、2D(2次元)コンテキストを使用します。
         * */
        const context = canvas.getContext("2d");

        /**
         * 6-1. コンテキストを使用して、目的物を描画する。
         *  => 画像を Canvasに合成する
         * NOTE: drawImage(image, dx, dy, dWidth, dHeight)
         * => Canvas 2D API の CanvasRenderingContext2D.drawImage() メソッドは、
         * キャンバスに画像を描画するいくつかの方法を提供します。
         * => 今回は、x, y 座標ともに原点から、Startして、幅・高さを Canvasと同じサイズにしています。
         * => つまり、Canvasに、ピッタリ収まるサイズで、描かれる。
         */
        context.drawImage(image, 0, 0, canvas.width, canvas.height);

        /**
         * 5. コンテキスト内の設定をする
         * => 描く図形の塗りつぶしの Color(透明な赤色)を Setする
         */
        context.fillStyle = "rgba(255, 0, 0, 0.5)";

        /**
         * 6-2. コンテキストを使用して、目的物を描画する。
         * NOTE: CanvasRenderingContext2D.fillRect(x, y, width, height)
         * => 塗りつぶした矩形を現在の fillStyle に基づいて描きます。
         * => 今回の場合は、透明な赤色の四角形を、指定した座標に、指定した縦横で、描いている。
         */
        context.fillRect(75, 50, 50, 50);
      };
    </script>
  </body>
</html>

今回使用しているCanvas-APIの使い方・まとめ

それでは、SampleCodeで、使用している次の Canvas-APIのメソッド・プロパティなどを紹介します。

  1. HTMLCanvasElement: getContext() メソッド
  2. CanvasRenderingContext2D インスタンス
  3. CanvasRenderingContext2D: drawImage() メソッド
  4. CanvasRenderingContext2D: fillStyle プロパティ
  5. CanvasRenderingContext2D.fillRect()

それでは、それぞれ見ていきます。

1. HTMLCanvasElement: getContext() メソッド

  • HTMLCanvasElement.getContext() メソッドは、描画コンテキストを返します。

    • 描画コンテキストには、"2d"(2次元)や、"webgl"(3次元・Webグラフィック)などがあります。

  • 対応していないコンテキスト識別子であったり、既に別なコンテキストモードが設定されていたりした場合は null になります。

  • 同じ canvas要素において、同じ contextType 引数を指定して後からこのメソッドを呼び出すと、常に最初の時点で呼び出された時と同じ描画 Context インスタンスが返されます。

    • その canvas要素で違う描画 Context オブジェクトを取得することはできません。
    • つまり、1度、canvasタグから、2D(2次元のContext)を作成したら、そこから同じ canvas要素を使って、3D(3次元のContext)など別の描画Contextを作成することはできないということです。

HTMLCanvasElement.getContext()の構文は、次のとおりです。

HTMLCanvasElement.getContext()の構文
canvas.js
HTMLCanvasElement.getContext(contextType)

  • 引数1: contextType

    • キャンバスに関連する描画コンテキストを定義するコンテキスト識別子が入っている文字列です
    • 利用可能な値は次の通りです。
    1. "2d": 2 次元の描画コンテキストを表すCanvasRenderingContext2Dオブジェクトが作成されます。
    2. "webgl"（または "experimental-webgl"）: 3 次元レンダリングコンテキストを表す WebGLRenderingContextオブジェクトを作成します。
      • このコンテキストは、WebGL version 1 (OpenGL ES 2.0) を実装しているブラウザーでのみ利用可能です。
    3. "webgl2": 3 次元レンダリングコンテキストを表すWebGL2RenderingContext(en-US) オブジェクトを作成します。
      • このコンテキストは、WebGL version 2 (OpenGL ES 3.0) を実装しているブラウザーでのみ利用できます。
    4. "webgpu": これは、WebGPU レンダーパイプライン用の 3 次元レンダリングコンテキストを表すGPUCanvasContext(en-US) オブジェクトを作成するものです。
      • このコンテキストは、WebGPU API (en-US) を実装しているブラウザーでのみ利用できます。
    5. "bitmaprenderer": 指定されたImageBitmapRenderingContext(en-US)でキャンバスのコンテンツを置き換える機能のみを提供します。

2. CanvasRenderingContext2D インスタンス

  • CanvasRenderingContext2Dは、Canvas API のインターフェイスで、 <canvas> 要素の描画面のための二次元描画コンテキストを提供します。
  • 図形、文字、画像、その他のオブジェクトを描画するのに使用します。
CanvasRenderingContext2D インスタンスの生成手順
  1. CanvasRenderingContext2Dインスタンスを取得するには、まず連携する HTML の <canvas> 要素が必要です。
<canvas id="my-house" width="300" height="300"></canvas>
  1. 上記の Canvasの二次元描画コンテキストを取得するには、引数に '2d' を指定してgetContext() を <canvas> に対して呼び出します。
const canvas = document.getElementById("my-house");
const ctx = canvas.getContext("2d");
  1. 二次元描画コンテキストを取得した後は、好きなように描画できます。以下のコードは家を描画します。
house.html
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <canvas id="my-house" width="300" height="300"></canvas>
    <script>
      const canvas = document.getElementById("my-house");
      const ctx = canvas.getContext("2d");
      // 線の幅を設定
      ctx.lineWidth = 10;

      // 壁
      ctx.strokeRect(75, 140, 150, 110);

      // ドア
      ctx.fillRect(130, 190, 40, 60);

      // 屋根
      ctx.beginPath();
      ctx.moveTo(50, 140);
      ctx.lineTo(150, 60);
      ctx.lineTo(250, 140);
      ctx.closePath();
      ctx.stroke();
    </script>
  </body>
</html>

3. CanvasRenderingContext2D: drawImage() メソッド

  • Canvas 2D API のCanvasRenderingContext2D.drawImage()メソッドは、キャンバスに画像を描画するいくつかの方法を提供します。

CanvasRenderingContext2D.drawImage()の構文は、次のとおりです。

CanvasRenderingContext2D.drawImage()の構文
CanvasRenderingContext2D.drawImage(image, dx, dy, dWidth, dHeight)
  1. 引数1: image
    • このコンテキストに描画する要素です。仕様では、任意のCanvasの画像Srcが使えます。
  2. 引数2: dx
    • 描画元imageの左上の角を配置する、描画先キャンバス内の x 座標です。
  3. 引数3: dy
    • 描画元imageの左上の角を配置する、描画先キャンバス内の y 座標です。
  4. 引数4: dWidth
    • imageを描画先キャンバスに描画する際の幅です。
    • これにより、描画する画像の拡大や縮小ができます。
    • 指定しない場合は、画像はそのままの幅で描画されます。
  5. 引数5: dHeight
    • image を描画先キャンバスに描画する際の高さです。
    • これにより、描画する画像の拡大や縮小ができます。
    • 指定しない場合は、画像はそのままの高さで描画されます。

4. CanvasRenderingContext2D: fillStyle プロパティ

  • CanvasRenderingContext2D.fillStyleは、Canvas 2D API のプロパティで、図形の内側を塗りつぶすために使用する色、グラデーション、またはパターンを指定します。
    • 既定値は #000 (黒色)です。

5. CanvasRenderingContext2D.fillRect() メソッド

  • CanvasRenderingContext2D.fillRect()は、Canvas 2D API のメソッドで、塗りつぶした矩形を現在のfillStyleに基づいて描きます。
  • このメソッドはキャンバスに直接描画を行い、現在のパスを変更しません。
    • したがって、その後のfill()(en-US) または、stroke()の呼び出しには影響しません。

CanvasRenderingContext2D.fillRect()の構文は、次のとおりです。

CanvasRenderingContext2D.fillRect()の構文
CanvasRenderingContext2D.fillRect(x, y, width, height);
  • fillRect()メソッドは塗りつぶした矩形を、 (x, y) を始点とし、widthとheightでサイズを指定しで描画します。
  • 塗りつぶしのスタイルは、現在のfillStyle属性によって決定されます。
  1. 引数1: x
    • 矩形の開始位置の X 座標です。
  2. 引数2: y
    • 矩形の開始位置の X 座標です。
  3. 引数3: width
    • 矩形の幅です。正の数であれば右方向、負の数であれば左方向です。
  4. 引数4: height
    • 矩形の高さです。正の数であれば下方向、負の数であれば上方向です。

Canvasの学習を助けるおすすめのWeb情報

Canvasの学習を助けるおすすめのWeb情報として、次の2つがおすすめです。
ぜひ活用してみてください。

  1. MDN-Docの Canvas チュートリアル

    • ハンズオンで、Canvasに対する理解を深めるなら、これがBest！

https://developer.mozilla.org/ja/docs/Web/API/Canvas_API/Tutorial

  1. 【JavaScript】 Canvasの使い方まとめ
    • わかりやすく、Canvasの使い方がまとまっています。

https://note.affi-sapo-sv.com/js-canvas-how-use.php

参考・引用

  1. Canvas チュートリアル
  2. 【JavaScript】 Canvasの使い方まとめ
  3. HTMLCanvasElement: getContext() メソッド
  4. CanvasRenderingContext2D
  5. CanvasRenderingContext2D: drawImage() メソッド
  6. CanvasRenderingContext2D: fillStyle プロパティ
  7. CanvasRenderingContext2D.fillRect()

注意事項

この記事は、AIQ 株式会社の社員による個人の見解であり、所属する組織の公式見解ではありません。

求む、冒険者！

AIQ株式会社では、一緒に働いてくれるエンジニアを絶賛、募集しております🐱🐹✨

エンジニア視点での我が社のおすすめポイント

  1. フルリモート・フルフレックスの働きやすい環境！
    • 前の会社でアサインしてた現場は、フル出社だったので、ありがたすぎる。。。
    • もうフル出社には、戻れなくなります！
  2. 経験豊富なエンジニアの先輩方
    • 私は、3年目の駆け出しエンジニアなので、これが、かなりありがたいです！
  3. 自社開発とR&D(受託開発)を両方している会社なので、経験できる技術が多い。
    • 自社のProduct開発と、他社からの受託案件で、いろいろな技術を学ぶことができます。
  4. AI関連の最新の技術に触れられるチャンスが多い。
    • 自社で特許を持つほど、AI技術に強い会社で、プロファイリングを得意とした技術体系があります。
    • ChatGPTを自社アプリに搭載など、AIトレンドも、もちろん追っており、最新の技術に触れられるチャンスが多いです。
  5. たまに、札幌ラボ(東京から札幌) or 東京オフィス(札幌から東京)に出張で行ける！
    • 東京と、札幌に2拠点ある会社なので、会合などで集まる際に、出張で行けます。

採用技術 (一部抜粋)

  • FrontEnd: TypeScript, JavaScript, React.js, Vue.js, Next.js, Nuxt.js など
  • BackEnd: Node.js, Express,Python など
  • その他技術: Docker, AWS, Git, GitHub など

エントリー方法

  1. 私達と東京か札幌で一緒に働ける仲間を募集しています。
    詳しくは、Wantedly (https://www.wantedly.com/companies/aiqlab)を見てみてください。

Webエンジニア向け説明

https://www.wantedly.com/projects/1089410

データサイエンティスト向け説明

https://www.wantedly.com/projects/1089406

人事に直通(?)・ご紹介Plan(リファラル採用)

私経由で、ご紹介もできますので、興味のある方や気軽にどんな会社なのか知りたい方は、X(旧:Twitter)にて、DMを送ってくれても大丈夫です。
https://twitter.com/masanyon1212

AIQ Tech Blog (有志)
AIQ Tech Blog (有志)Publication

AIQ 株式会社 に所属するエンジニアが技術情報をお届けします。 ※ AIQ 株式会社 社員による個人の見解であり、所属する組織の公式見解ではありません。 Wantedly: wantedly.com/companies/aiqlab

Discussion