HTML5 <canvas> 参考手册
概要
HTML5 <canvas> タグは、スクリプト（通常はJavaScript）を使用して画像を描画するために使用されます。
ただし、<canvas> 要素自体には描画能力がありません（それは単なるグラフィックのコンテナです）。実際の描画タスクを完了するには、スクリプトを使用する必要があります。
getContext() メソッドは、キャンバス上に描画するためのメソッドとプロパティを提供するオブジェクトを返します。
本手冊は、キャンバス上でテキスト、線、矩形、円などを描画するために使用される getContext("2d") オブジェクトの完全なプロパティとメソッドを提供します。
ブラウザサポート
Internet Explorer 9、Firefox、Opera、Chrome、および Safari は <canvas> タグのプロパティとメソッドをサポートしています。
注意: Internet Explorer 8 およびそれ以前のバージョンのIEは <canvas> 要素をサポートしていません。
カラー、スタイル、影
| プロパティ | 説明 |
|---|---|
| fillStyle | 塗りつぶしに使用される色、グラデーション、またはパターンを設定または取得します。 |
| strokeStyle | ストロークに使用される色、グラデーション、またはパターンを設定または取得します。 |
| shadowColor | 影に使用される色を設定または取得します。 |
| shadowBlur | 影のぼかしレベルを設定または取得します。 |
| shadowOffsetX | 影と形状の水平距離を設定または取得します。 |
| shadowOffsetY | 影と形状の垂直距離を設定または取得します。 |
メソッド
| メソッド | 説明 |
|---|---|
| createLinearGradient() | キャンバスの内容に線形グラデーションを作成します。 |
| createPattern() | 指定された方向に指定された要素を繰り返します。 |
| createRadialGradient() | キャンバスの内容に放射状/環状のグラデーションを作成します。 |
| addColorStop() | グラデーションオブジェクト内の色と停止位置を指定します。 |
矩形
| メソッド | 説明 |
|---|---|
| rect() | 矩形を作成します。 |
| fillRect() | "塗りつぶされた" 矩形を描画します。 |
| strokeRect() | 矩形（無塗りつぶし）を描画します。 |
| clearRect() | 指定された矩形内のピクセルをクリアします。 |
パス
| メソッド | 説明 |
|---|---|
| fill() | 現在の描画（パス）を塗りつぶします。 |
| stroke() | 定義されたパスを描画します。 |
| beginPath() | 新しいパスを開始するか、現在のパスをリセットします。 |
| moveTo() | パスを作成せずにキャンバス内の指定された点に移動します。 |
| closePath() | 現在の点から開始点に戻るパスを作成します。 |
| lineTo() | 新しい点を追加し、その点から最後に指定された点への線をキャンバスに作成します。 |
| clip() | 元のキャンバスから任意の形状やサイズの領域をクリップします。 |
| quadraticCurveTo() | 二次ベジェ曲線を作成します。 |
| bezierCurveTo() | 三次ベジェ曲線を作成します。 |
| arc() | 弧/曲線（円形または部分円を作成するのに使用される）を作成します。 |
| arcTo() | 2つの接線の間の弧/曲線を作成します。 |
| isPointInPath() | 指定された点が現在のパス内にある場合は true を返し、それ以外の場合は false を返します。 |
| 線のスタイル | |
|---|---|
| 属性 | 説明 |
| lineCap | 線の終端スタイルを設定または取得します。 |
| lineJoin | 2本の線が交差する時の角のタイプを設定または取得します。 |
| lineWidth | 現在の線の幅を設定または取得します。 |
| miterLimit | 最大の斜接長を設定または取得します。 |
| 変換 | |
|---|---|
| メソッド | 説明 |
| scale() | 現在の描画を拡大または縮小します。 |
| rotate() | 現在の描画を回転させます。 |
| translate() | キャンバス上の (0,0) の位置を再マッピングします。 |
| transform() | 現在の変換マトリックスを置き換えます。 |
| setTransform() | 現在の変換を単位行列にリセットします。その後、transform() を実行します。 |
| テキスト | |
|---|---|
| 属性 | 説明 |
| font | テキストの現在のフォントプロパティを設定または取得します。 |
| textAlign | テキストの現在の揃え方を設定または取得します。 |
| textBaseline | テキストを描画する際に使用する現在のベースラインを設定または取得します。 |
| メソッド | 説明 |
| fillText() | キャンバス上に"塗りつぶされた"テキストを描画します。 |
| strokeText() | キャンバス上にテキスト（塗りつぶしなし）を描画します。 |
| measureText() | 指定されたテキストの幅を含むオブジェクトを返します。 |
| 画像描画 | |
|---|---|
| メソッド | 説明 |
| drawImage() | キャンバス上に画像、キャンバス、またはビデオを描画します。 |
| ピクセル操作 | ||
|---|---|---|
| 属性 | 説明 | |
| width | ImageDataオブジェクトの幅を返します。 | |
| height | ImageDataオブジェクトの高さを返します。 | |
| data | 指定されたImageDataオブジェクトの画像データを含むオブジェクトを返します。 | |
| メソッド | 説明 | |
| createImageData() | 新しい空のImageDataオブジェクトを作成します。 | |
| getImageData() | キャンバス上の指定された矩形のピクセルデータをコピーするImageDataオブジェクトを返します。 | |
| putImageData() | 指定されたImageDataオブジェクトから画像データをキャンバスに戻します。 | |
| 合成 | |
|---|---|
| 属性 | 説明 |
| globalAlpha | 描画の現在のアルファ値または透明値を設定または取得します。 |
| globalCompositeOperation | 新しい画像が既存の画像にどのように描画されるかを設定または取得します。 |
質問と回答
Q1: <canvas> タグを使用してどのブラウザで画像を描画できますか？
A1: Internet Explorer 9以降、Firefox、Opera、Chrome、および Safari で画像を描画できます。
Q2: shadowBlur のプロパティは何を意味しますか？
A2: shadowBlur プロパティは、影のぼかしレベルを設定または取得します。
Q3: fillText() メソッドとは何ですか？
A3: fillText() メソッドは、キャンバス上に "塗りつぶされた" テキストを描画します。