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

はじめに

この記事を読めば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を活用して、ウェブページに魅力的なグラフィックスやアニメーションを追加できるようになるかと思います。