HTML5 Canvas
<canvas> タグはグラフィック（図表やその他の画像など）を定義します。図形を描画するにはスクリプトを使用する必要があります。
キャンバス（Canvas）上に、赤い長方形、グラデーション長方形、カラフルな長方形、そしていくつかのカラフルなテキストを描画します。
canvas とは？
HTML5 <canvas> 要素はグラフィックの描画に使用され、スクリプト（通常は JavaScript）によって実行されます。
<canvas> タグは単なるグラフィックのコンテナであり、図形を描画するにはスクリプトを使用する必要があります。
canvas を使用して、パス、ボックス、円、文字を描画したり、画像を追加したりする方法は複数あります。
ブラウザサポート
表内の数字は、<canvas> 要素をサポートする最初のブラウザバージョン番号を示します。
| 要素 | |||||
|---|---|---|---|---|---|
| <canvas> | 4.0 | 9.0 | 2.0 | 3.1 | 9.0 |
キャンバス（Canvas）を作成する
キャンバスは Web ページ内の矩形の枠であり、<canvas> 要素によって描画されます。
注意：デフォルトでは、<canvas> 要素には枠線とコンテンツがありません。
<canvas> の簡単な例は次のとおりです：
注意：タグは通常、id 属性（スクリプトで頻繁に参照される）を指定する必要があります。width 属性と height 属性はキャンバスのサイズを定義します。
ヒント：HTML ページ内で複数の <canvas> 要素を使用できます。
style 属性を使用して枠線を追加します：
例
試してみる »
JavaScript を使用して画像を描画する
canvas 要素自体には描画機能はありません。すべての描画処理は JavaScript 内で行う必要があります：
例
試してみる »
例の解説：
まず、<canvas> 要素を見つけます：
次に、context オブジェクトを作成します：
getContext("2d") オブジェクトは組み込みの HTML5 オブジェクトで、パス、矩形、円、文字の描画や画像の追加など、さまざまなメソッドを備えています。
次の 2 行のコードは赤い長方形を描画します：
ctx.fillRect(0,0,150,75);
fillStyle プロパティは、CSS カラー、グラデーション、またはパターンに設定できます。fillStyle のデフォルト設定は #000000（黒）です。
fillRect(x,y,width,height) メソッドは、矩形の現在の塗りつぶし方法を定義します。
Canvas 座標
canvas は 2 次元グリッドです。
canvas の左上隅の座標は (0,0) です。
上記の fillRect メソッドはパラメータ (0,0,150,75) を持ちます。
つまり、キャンバス上に 150x75 の長方形を左上隅 (0,0) から描画します。
座標の例
下図のように、キャンバスの X 座標と Y 座標は、キャンバス上で描画の位置を指定するために使用されます。マウスを矩形の枠上に移動すると、位置座標が表示されます。
Canvas - パス
Canvas 上に線を描画するには、次の 2 つのメソッドを使用します：
- moveTo(x,y) 線の開始座標を定義します
- lineTo(x,y) 線の終了座標を定義します
線を描画するには、stroke() のような「インク」メソッドを使用する必要があります。
例
開始座標 (0,0) と終了座標 (200,100) を定義します。次に、stroke() メソッドを使用して線を描画します：
JavaScript:
試してみる »
canvas で円を描画するには、次のメソッドを使用します：
arc(x,y,r,start,stop)
実際に円を描画するときは、stroke() や fill() などの「インク」メソッドを使用します。
例
arc() メソッドを使用して円を描画します：
JavaScript:
試してみる »
Canvas - テキスト
canvas を使用してテキストを描画する際の重要なプロパティとメソッドは次のとおりです：
- font - フォントを定義します
- fillText(text,x,y) - canvas 上に塗りつぶしのテキストを描画します
- strokeText(text,x,y) - canvas 上に輪郭のみのテキストを描画します
fillText() を使用する：
例
「Arial」フォントを使用して、キャンバス上に高さ 30px のテキスト（塗りつぶし）を描画します：
JavaScript:
試してみる »
strokeText() を使用する：
例
「Arial」フォントを使用して、キャンバス上に高さ 30px のテキスト（輪郭のみ）を描画します：
JavaScript:
試してみる »
Canvas - グラデーション
グラデーションは、矩形、円、線、テキストなどに塗りつぶすことができ、さまざまな形状にそれぞれ異なる色を定義できます。
以下は、Canvas グラデーションを設定する 2 つの異なる方法です：
- createLinearGradient(x,y,x1,y1) - 線形グラデーションを作成します
- createRadialGradient(x,y,r,x1,y1,r1) - 放射状／円形グラデーションを作成します
グラデーションオブジェクトを使用する場合、2 つ以上の停止色（カラーストップ）を使用する必要があります。
addColorStop() メソッドは色の停止位置を指定し、パラメータは座標で表され、0 から 1 の間です。
グラデーションを使用するには、fillStyle または strokeStyle の値をグラデーションに設定し、その後、矩形、テキスト、線などの形状を描画します。
createLinearGradient() を使用する：
例
線形グラデーションを作成します。グラデーションを使用して矩形を塗りつぶします：
JavaScript:
試してみる »
createRadialGradient() を使用する：
例
放射状／円形グラデーションを作成します。グラデーションを使用して矩形を塗りつぶします：
JavaScript:
試してみる »
Canvas - 画像
画像をキャンバス上に配置するには、次のメソッドを使用します：
- drawImage(image,x,y)
画像を使用する：
例
画像をキャンバス上に配置します：
JavaScript:
試してみる »
HTML Canvas リファレンスマニュアル
タグの完全な属性については、次を参照してください：Canvas リファレンスマニュアル。
HTML <canvas> タグ
| Tag | 説明 |
|---|---|
| <canvas> | HTML5 の canvas 要素は、JavaScript を使用して Web ページ上に画像を描画します。 |
その他の拡張詳細については、以下を参照してください：HTML5 Canvas を学ぶなら、この記事だけで十分です