【HTML Living Standard】canvas要素の使い方
canvas要素の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
canvasオブジェクトは、ウェブページ上でグラフィックを描画するための専用領域を表すオブジェクトです。このHTML要素は、初期状態では空の矩形領域であり、JavaScriptのAPIを通じて動的に2Dグラフィック（図形、画像、テキストなど）や3Dグラフィック（WebGLを使用）を描画できます。
主に、ゲームの開発、データのグラフ化、写真加工ツール、リアルタイムのアニメーションといった用途で活用されます。グラフィックの描画には、通常getContext('2d')メソッドで取得できる2D描画コンテキストを使用し、線、円、四角形などの図形を描いたり、画像を配置したり、テキストを描画したりすることが可能です。
canvasのサイズは、width属性とheight属性で指定するのが一般的です。これらの属性で指定されたサイズが、canvasの内部描画領域の解像度を決定します。CSSでサイズを指定することも可能ですが、その場合、内部描画領域がCSSで指定されたサイズに合わせて拡大縮小されるため、描画内容がぼやける可能性があります。
また、canvas要素の開始タグと終了タグの間にコンテンツを記述すると、canvas要素をサポートしていない古いブラウザや環境において、代替コンテンツとしてその内容が表示されます。このフォールバック機能により、幅広いユーザーへのアクセシビリティを確保できます。canvasは、ウェブ上でリッチな視覚表現を実現するための非常に強力なツールです。
構文(syntax)
1<canvas id="myCanvas" width="300" height="150"></canvas>
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません
サンプルコード
HTML Canvasで図形を描画する
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>HTML Canvas サンプル</title> 7 <style> 8 /* canvas要素の境界が分かりやすいようにスタイルを設定 */ 9 canvas { 10 border: 1px solid #000; 11 } 12 </style> 13</head> 14<body> 15 16 <!-- 17 <canvas>要素は、JavaScriptを使用してグラフィックを描画するための 18 ビットマップキャンバス領域を提供します。 19 widthとheight属性でキャンバスのサイズを指定します。 20 --> 21 <canvas id="myCanvas" width="400" height="200"></canvas> 22 23 <script> 24 // HTMLドキュメントが完全に読み込まれてからスクリプトを実行 25 document.addEventListener('DOMContentLoaded', () => { 26 // idが"myCanvas"のcanvas要素を取得 27 const canvas = document.getElementById('myCanvas'); 28 29 // canvas要素がサポートされているか確認 30 if (canvas.getContext) { 31 // 2D描画コンテキストを取得 32 // これを使ってcanvas上に図形やテキストなどを描画します 33 const ctx = canvas.getContext('2d'); 34 35 // 描画する図形の色を設定 36 ctx.fillStyle = 'blue'; 37 38 // 四角形を描画 39 // fillRect(x座標, y座標, 幅, 高さ) 40 // (0,0)はキャンバスの左上隅 41 ctx.fillRect(50, 50, 150, 100); 42 43 // 別の色の四角形を描画 44 ctx.fillStyle = 'red'; 45 ctx.fillRect(250, 30, 100, 120); 46 47 } else { 48 // canvasがサポートされていない場合のメッセージ 49 alert('お使いのブラウザはCanvasをサポートしていません。'); 50 } 51 }); 52 </script> 53 54</body> 55</html>
HTMLの<canvas>要素は、ウェブページ上でJavaScriptを使用して動的なグラフィックを描画するためのビットマップキャンバス領域を提供します。これは、まるで真っ白な画用紙に絵を描くように、プログラムによって図形やテキスト、画像、アニメーションなどを生成できる機能です。<canvas>要素自体に引数や戻り値はありませんが、widthとheightという属性を使ってキャンバスの幅と高さをピクセル単位で指定します。
サンプルコードでは、まずHTML内にidがmyCanvasの<canvas>要素を配置し、幅400ピクセル、高さ200ピクセルに設定しています。実際にこのキャンバスに描画を行うのはJavaScriptの役割です。JavaScriptのコードでは、document.getElementById()で対象の<canvas>要素を取得した後、canvas.getContext('2d')メソッドを呼び出して2D描画コンテキストを取得します。この描画コンテキストが、キャンバス上に図形を描くための筆や絵の具のような役割を果たします。例えば、ctx.fillStyleプロパティで塗りつぶしの色を設定し、ctx.fillRect(x座標, y座標, 幅, 高さ)メソッドの引数に位置とサイズを指定して、塗りつぶされた四角形を描画しています。このように<canvas>は、JavaScriptと連携することで多彩なグラフィック表現を可能にします。
canvas要素は、HTMLで描画領域を用意しますが、直接絵を描く機能はありません。グラフィックを描画するには、必ずJavaScriptでgetContext('2d')のように「描画コンテキスト」を取得し、そのコンテキストのメソッドを使って図形やテキストを描画します。
canvas要素のwidthとheightは、HTML属性で指定することが重要です。CSSでサイズを指定すると、描画内容がぼやける可能性があるため注意が必要です。また、canvas.getContextでブラウザがcanvasに対応しているか確認する処理は、古い環境でのエラーを防ぎ、互換性を保つために不可欠です。スクリプトがHTML要素を操作できるよう、DOMContentLoadedイベントを待ってから実行すると安全です。
HTML Canvasの基本的な描画方法
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>HTML Canvas 基本的な使い方</title> 7 <style> 8 /* canvas要素の境界線を表示して領域を分かりやすくする */ 9 canvas { 10 border: 1px solid #000; 11 } 12 </style> 13</head> 14<body> 15 <!-- 16 canvas要素を配置します。 17 id属性を使ってJavaScriptからこのcanvas要素を参照します。 18 widthとheight属性で描画領域のサイズを定義します。 19 --> 20 <canvas id="myDrawingCanvas" width="400" height="200"> 21 お使いのブラウザはCanvasに対応していません。 22 </canvas> 23 24 <script> 25 // DOMContentLoadedイベントは、HTMLのDOMツリーが完全に読み込まれた後に実行されます。 26 // これにより、JavaScriptがcanvas要素を確実に参照できるようになります。 27 document.addEventListener('DOMContentLoaded', function() { 28 // idが"myDrawingCanvas"のcanvas要素を取得します。 29 const canvas = document.getElementById('myDrawingCanvas'); 30 31 // canvasが利用可能か、かつgetContext('2d')が利用可能かを確認します。 32 // '2d'コンテキストは、2Dグラフィックスを描画するために使用されます。 33 if (canvas && canvas.getContext) { 34 const ctx = canvas.getContext('2d'); 35 36 // 2D描画コンテキストが正常に取得できた場合、描画を開始します。 37 if (ctx) { 38 // ここに描画処理を記述します。 39 40 // 1. 四角形を描画する例 41 // 塗りつぶしの色を青に設定します。 42 ctx.fillStyle = 'blue'; 43 // (x座標, y座標, 幅, 高さ) で四角形を塗りつぶします。 44 ctx.fillRect(10, 10, 100, 50); // 左上(10,10)から幅100, 高さ50の四角 45 46 // 2. 線を描画する例 47 // 線の色を赤に設定します。 48 ctx.strokeStyle = 'red'; 49 // 線の太さを2ピクセルに設定します。 50 ctx.lineWidth = 2; 51 // 新しいパスを開始します。 52 ctx.beginPath(); 53 // 描画の開始点に移動します。 54 ctx.moveTo(150, 10); 55 // 描画の終点まで線を追加します。 56 ctx.lineTo(250, 60); 57 // 現在のパスを実際に描画します。 58 ctx.stroke(); 59 60 // 3. 円を描画する例 (塗りつぶし) 61 // 塗りつぶしの色を緑に設定します。 62 ctx.fillStyle = 'green'; 63 // 新しいパスを開始します。 64 ctx.beginPath(); 65 // (x座標, y座標, 半径, 開始角, 終了角, 反時計回りか) で円弧を作成します。 66 // Math.PI * 2 は360度を表し、完全な円を描きます。 67 ctx.arc(80, 130, 40, 0, Math.PI * 2, false); 68 // 現在のパスを塗りつぶします。 69 ctx.fill(); 70 71 // 4. 円を描画する例 (線画) 72 // 線の色を紫に設定します。 73 ctx.strokeStyle = 'purple'; 74 // 線の太さを3ピクセルに設定します。 75 ctx.lineWidth = 3; 76 // 新しいパスを開始します。 77 ctx.beginPath(); 78 // (x座標, y座標, 半径, 開始角, 終了角, 反時計回りか) で円弧を作成します。 79 ctx.arc(200, 130, 40, 0, Math.PI * 2, false); 80 // 現在のパスを線で描画します。 81 ctx.stroke(); 82 83 } else { 84 // 2Dコンテキストが取得できなかった場合のエラーメッセージ 85 console.error('Canvas 2Dコンテキストが取得できませんでした。'); 86 } 87 } else { 88 // canvas要素が見つからなかった、またはgetContextメソッドが存在しない場合のエラーメッセージ 89 console.error('Canvas要素が見つからないか、ブラウザがCanvasをサポートしていません。'); 90 } 91 }); 92 </script> 93</body> 94</html>
HTMLのcanvas要素は、Webページ上でグラフィックを描画するための特別な領域を提供します。この要素自体には直接的な引数や戻り値はありませんが、JavaScriptと連携することで、2Dグラフィックスを動的に生成し、表示することが可能です。
まず、HTMLファイル内に<canvas>タグを配置します。この際、id属性で要素を識別し、width属性とheight属性で描画領域のサイズをピクセル単位で指定します。例えば、<canvas id="myDrawingCanvas" width="400" height="200">のように記述し、タグの間にブラウザがcanvasに対応していない場合に表示される代替テキストを含めることができます。
グラフィックの実際の描画はJavaScriptで行います。まず、document.getElementById()メソッドを使用して、HTMLで配置したcanvas要素をJavaScriptから参照します。次に、そのcanvas要素のgetContext('2d')メソッドを呼び出し、2Dグラフィックスを描画するための「コンテキスト」を取得します。このgetContextメソッドは引数として描画タイプ（ここでは'2d'）を受け取り、描画操作を実行するためのメソッドやプロパティを持つオブジェクトを返します。
取得したコンテキストオブジェクト（ctx）を利用して、さまざまな図形を描画します。例えば、ctx.fillStyleで塗りつぶしの色を設定し、ctx.fillRect(x座標, y座標, 幅, 高さ)で四角形を塗りつぶすことができます。線を引く場合は、ctx.strokeStyleで線の色、ctx.lineWidthで線の太さを設定し、ctx.beginPath()で新しいパスを開始、ctx.moveTo(x, y)で開始点、ctx.lineTo(x, y)で終点を指定した後、ctx.stroke()で線を描画します。円を描くにはctx.arc(x座標, y座標, 半径, 開始角, 終了角, 反時計回りか)を使用し、ctx.fill()またはctx.stroke()で塗りつぶしや線を描きます。これらの描画メソッドは、それぞれの図形を描くために必要な引数を受け取ります。
このように、canvas要素とJavaScriptを組み合わせることで、Webページ上で複雑な図形、グラフ、アニメーションなどを自由に表現することが可能になります。
HTMLのcanvas要素は、単独では描画されず、必ずJavaScriptを用いて操作する必要があります。JavaScriptからid属性でcanvas要素を取得した後、getContext('2d')メソッドで2D描画コンテキストが利用可能か、確実に確認することが重要です。このJavaScriptの描画処理は、HTMLのDOMツリーが完全に読み込まれた後に行うため、DOMContentLoadedイベント内で実行するのが安全な利用法です。また、canvasタグ内には、お使いのブラウザが対応していない場合に表示される代替コンテンツを記述する配慮も必要です。widthとheight属性で描画領域のサイズを明確に定義し、描画コンテキストのプロパティ（色や線の太さなど）を設定してから、図形描画メソッドを実行することで、意図するグラフィックスが表示されます。