HTML Canvasのマスター方法20選！初心者から上級者まで網羅

HTML Canvasのマスター方法を徹底解説HTML
2023.11.17
この記事は約8分で読めます。

※本記事のコンテンツは、利用目的を問わずご活用いただけます。実務経験10000時間以上のエンジニアが監修しており、常に解説内容のわかりやすさや記事の品質に注力しておりますので、不具合・分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。(理解できない部分などの個別相談も無償で承っております)
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

この記事を読めばHTML Canvasを使いこなすことができるようになります。

HTML Canvasはウェブページにおいてグラフィックスやアニメーションを描画するために使用される便利なツールです。

しかし、初心者にとっては使い方が分かりづらいこともあります。

そこで今回は、HTML Canvasの使い方、対処法、注意点、カスタマイズ方法、サンプルコードを徹底解説し、初心者から上級者まで網羅した20のマスター方法をご紹介します。

●HTML Canvasの基本

HTML Canvasは、HTML5で導入された新しい要素で、2Dグラフィックスを描画するためのものです。

Canvasは、JavaScriptを使用して描画やアニメーションを制御します。

○Canvas要素の追加

まずはHTMLファイルにCanvas要素を追加しましょう。

下記のようなコードをbodyタグ内に配置します。

<canvas id="myCanvas" width="300" height="150"></canvas>

id属性を設定することで、JavaScriptからCanvas要素を操作しやすくなります。

また、widthとheight属性でCanvasのサイズを指定します。

●JavaScriptでのCanvasの操作

次に、JavaScriptを使用してCanvas要素を操作していきます。

○Canvas要素の取得

まずは、JavaScriptでCanvas要素を取得する方法を確認しましょう。

下記のようなコードをscriptタグ内に記述します。

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

getElementByIdメソッドでCanvas要素を取得し、getContextメソッドで2D描画コンテキストを取得します。

これにより、描画機能にアクセスできるようになります。

○描画の基本

Canvasでは、線や円、矩形などの基本図形を描画できます。

ここでは、いくつかの基本図形の描画方法を紹介します。

□矩形の描画

次のコードで、矩形を描画できます。

ctx.fillStyle = "red";
ctx.fillRect(50, 50, 100, 100);

fillStyleプロパティで塗りつぶし色を指定し、fillRectメソッドで矩形を描画します。

引数は、(x座標, y座標, 幅, 高さ)です。

□円の描画

次のコードで、円を描画できます。

ctx.beginPath();
ctx.arc(150, 75, 50, 0, 2 * Math.PI);
ctx.fillStyle = "blue";
ctx.fill();

beginPathメソッドでパスを開始し、arcメソッドで円を描画します。

引数は、(x座標, y座標, 半径, 開始角度, 終了角度)です。fillメソッドで塗りつぶしを行います。

□線の描画

次のコードで、線を描画できます。

ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(250, 50);
ctx.strokeStyle = "green";
ctx.lineWidth = 5;
ctx.stroke();

moveToメソッドで始点を指定し、lineToメソッドで終点を指定します。

strokeStyleプロパティで線の色を指定し、lineWidthプロパティで線の太さを指定します。

最後に、strokeメソッドで線を描画します。

●HTML Canvasの応用例とサンプルコード

ここでは、HTML Canvasを応用したいくつかの例を紹介します。

○テキストの描画

次のコードで、テキストを描画できます。

ctx.font = "30px Arial";
ctx.fillStyle = "black";
ctx.fillText("Hello, Canvas!", 50, 50);

fontプロパティでフォントサイズとフォントファミリーを指定し、fillTextメソッドでテキストを描画します。

引数は、(テキスト, x座標, y座標)です。

○画像の描画

次のコードで、画像を描画できます。

const image = new Image();
image.src = "image.jpg";
image.onload = () => {
  ctx.drawImage(image, 50, 50, 100, 100);
};

Imageオブジェクトを作成し、srcプロパティで画像のURLを指定します。

画像の読み込みが完了したら、drawImageメソッドで画像を描画します。

引数は、(画像, x座標, y座標, 幅, 高さ)です。

○アニメーションの作成

次のコードで、簡単なアニメーションを作成できます。

let x = 50;
let dx = 2;

function animate() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillRect(x, 50, 100, 100);
  x += dx;

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

  requestAnimationFrame(animate);
}

animate();

アニメーションを実行する関数を定義し、その中で描画を行います。

clearRectメソッドでCanvasをクリアし、矩形を描画します。

requestAnimationFrameメソッドでアニメーションを繰り返し実行します。

●HTML Canvasの注意点と対処法

HTML Canvasを使用する際には、次のような注意点があります。

○レスポンシブ対応

Canvasはデフォルトでレスポンシブ対応していません。

しかし、次のようなコードでレスポンシブ対応を実現できます。

function resizeCanvas() {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
}

window.addEventListener("resize", resizeCanvas);
resizeCanvas();

resizeCanvas関数でCanvasのサイズをウィンドウのサイズに合わせ、resizeイベントリスナーでウィンドウサイズが変更されたときにCanvasのサイズを変更します。

○ピクセルのぼやけ

デバイスのピクセル比によっては、描画がぼやけて表示されることがあります。

次のようなコードで対処できます。

const dpr = window.devicePixelRatio || 1;
canvas.width = canvas.clientWidth * dpr;
canvas.height = canvas.clientHeight * dpr;
ctx.scale(dpr, dpr);

devicePixelRatioプロパティでデバイスのピクセル比を取得し、Canvasのサイズをピクセル比に合わせて調整します。

scaleメソッドで描画のスケールを変更します。

●HTML Canvasのカスタマイズ方法

○グラデーションの作成

次のコードで、グラデーションを作成できます。

const gradient = ctx.createLinearGradient(0, 0, canvas.width, 0);
gradient.addColorStop(0, "red");
gradient.addColorStop(0.5, "yellow");
gradient.addColorStop(1, "blue");

ctx.fillStyle = gradient;
ctx.fillRect(50, 50, 200, 100);

createLinearGradientメソッドで線形グラデーションを作成し、addColorStopメソッドで色を指定します。

fillStyleプロパティでグラデーションを設定し、fillRectメソッドで矩形を描画します。

○影の追加

次のコードで、影を追加できます。

ctx.shadowColor = "rgba(0, 0, 0, 0.5)";
ctx.shadowOffsetX = 5;
ctx.shadowOffsetY = 5;
ctx.shadowBlur = 10;

ctx.fillStyle = "green";
ctx.fillRect(50, 50, 100, 100);

shadowColorプロパティで影の色を指定し、shadowOffsetXとshadowOffsetYプロパティで影の位置を指定します。

shadowBlurプロパティで影のぼかしを指定し、fillRectメソッドで矩形を描画します。

○クリッピングパスの作成

次のコードで、クリッピングパスを作成できます。

ctx.beginPath();
ctx.arc(150, 75, 50, 0, 2 * Math.PI);
ctx.clip();

ctx.fillStyle = "red";
ctx.fillRect(0, 0, canvas.width, canvas.height);

beginPathメソッドでパスを開始し、arcメソッドで円を描画します。

clipメソッドでクリッピングパスを作成し、fillRectメソッドで矩形を描画します。

結果として、円の内部に矩形が描画されます。

まとめ

これで、あなたもHTML Canvasを活用して、ウェブページに魅力的なグラフィックスやアニメーションを追加できるようになるかと思います。