HTML5 Canvas

HTML5では、ウェブページに図形などのグラフィックスを描き、インタラクティブなコンテンツを作成するための新しい要素が導入されました。その中でも、<canvas>要素は特に注目に値します。この記事では、<canvas>要素を説明します。

<canvas>要素とは
基本的な使い方
まとめ

<canvas>要素とは

<canvas>要素は、HTML5で導入された新しい要素で、ウェブページ上で2Dグラフィックスを描画するための領域を提供します。

この要素を使用することで、グラフやゲーム、アニメーションなどの動的なコンテンツを作成できます。<canvas>要素自体は、描画するグラフィックスを含まず、JavaScriptと組み合わせて使用することで、実際の描画が行われます。

基本的な使い方

まず、<canvas>要素をHTML文書に追加し、id属性を設定して、JavaScriptから参照できるようにします。

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

今のコードだけで何も表示されません。

次に、JavaScriptを使用して、<canvas>要素にアクセスし、2D描画コンテキストを取得します。

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

2D描画コンテキストを取得したら、さまざまな描画メソッドを使用してグラフィックスを描画できます。例えば、次のコードは、赤い四角形を描画します。

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

<canvas>要素と2D描画コンテキストには、他にも多くの描画メソッドが用意されており、線を描画したり、テキストを表示したり、画像を読み込んだりできます。

// 線を描画
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(100, 100);
ctx.strokeStyle = 'blue';
ctx.lineWidth = 5;
ctx.stroke();

// テキストを表示
ctx.font = '20px Arial';
ctx.fillStyle = 'black';
ctx.fillText('Hello, Canvas!', 10, 130);

// 画像を読み込み
const image = new Image();
image.src = 'path/to/image.jpg';
image.onload = function() {
  ctx.drawImage(image, 150, 20);
};

サンプルコード

<canvas id="myCanvas-1" width="200" height="200"></canvas>
<script>const canvas = document.getElementById("myCanvas-1");
const ctx = canvas.getContext("2d");

// 線を描画
ctx.beginPath();
ctx.moveTo(10, 10);
ctx.lineTo(100, 100);
ctx.stroke();
</script>

表示例

サンプルコード

<canvas id="myCanvas-2" width="200" height="200"></canvas>
<script>const canvas = document.getElementById("myCanvas-2");
const ctx = canvas.getContext("2d");

// 三角形を描画
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(100, 100);
ctx.lineTo(0, 100);
ctx.closePath();
ctx.fill();

表示例

まとめ

CanvasではHTML5とJavaScriptを組み合わせて図を描画することが出来ます。また、<canvas>要素は、ゲーム開発やデータの可視化など、多くの分野で利用されています。

<canvas>要素を使いこなすためには、JavaScriptの基本的な知識と、2D描画コンテキストのメソッドやプロパティについて理解することが重要です。