HTML DOM Canvasオブジェクト
Canvas オブジェクト
Canvas オブジェクトは HTML5 で新しく追加されました。
HTML5 の <canvas> タグは画像を描画するために使用されます（スクリプト、通常は JavaScript による）。
Canvas オブジェクトにアクセスする
getElementById() を使用して <canvas> 要素にアクセスできます：
var x = document.getElementById("myCanvas");
試してみる
Canvas オブジェクトを作成する
document.createElement() メソッドを使用して <canvas> 要素を作成できます：
var x = document.createElement("CANVAS");
試してみる
注意：<canvas> 要素自体には描画機能はありません（単なる図形のコンテナです）- 実際の描画タスクはスクリプトを使用して行う必要があります。
getContext() メソッドは、キャンバス上に描画するためのメソッドとプロパティを提供するオブジェクトを返します。
このマニュアルでは、キャンバス上にテキスト、線、矩形、円などを描画するために使用できる getContext("2d") オブジェクトのすべてのプロパティとメソッドを提供します。
色、スタイル、影
| プロパティ | 説明 |
|---|---|
| fillStyle | 描画を塗りつぶすために使用される色、グラデーション、またはパターンを設定または返します。 |
| strokeStyle | ストロークに使用される色、グラデーション、またはパターンを設定または返します。 |
| shadowColor | 影に使用される色を設定または返します。 |
| shadowBlur | 影のぼかしレベルを設定または返します。 |
| shadowOffsetX | 影と形状の水平距離を設定または返します。 |
| shadowOffsetY | 影と形状の垂直距離を設定または返します。 |
| メソッド | 説明 |
|---|---|
| createLinearGradient() | 線形グラデーションを作成します（キャンバスコンテンツに使用）。 |
| createPattern() | 指定された方向に指定された要素を繰り返します。 |
| createRadialGradient() | 放射状/円形のグラデーションを作成します（キャンバスコンテンツに使用）。 |
| addColorStop() | グラデーションオブジェクト内の色と停止位置を規定します。 |
線のスタイル
| プロパティ | 説明 |
|---|---|
| lineCap | 線の終端のスタイルを設定または返します。 |
| lineJoin | 2本の線が交差するときに作成される角のタイプを設定または返します。 |
| lineWidth | 現在の線の幅を設定または返します。 |
| miterLimit | 最大マイター長を設定または返します。 |
矩形
| メソッド | 説明 |
|---|---|
| rect() | 矩形を作成します。 |
| fillRect() | 「塗りつぶされた」矩形を描画します。 |
| strokeRect() | 矩形を描画します（塗りつぶしなし）。 |
| clearRect() | 指定された矩形内の指定されたピクセルをクリアします。 |
パス
| メソッド | 説明 |
|---|---|
| fill() | 現在の描画（パス）を塗りつぶします。 |
| stroke() | 定義されたパスを描画します。 |
| beginPath() | パスを開始するか、現在のパスをリセットします。 |
| moveTo() | パスをキャンバス内の指定された点に移動します。線は作成しません。 |
| closePath() | 現在の点から始点に戻るパスを作成します。 |
| lineTo() | 新しい点を追加し、キャンバス上にその点から最後に指定された点までの線を作成します。 |
| clip() | 元のキャンバスから任意の形状とサイズの領域を切り取ります。 |
| quadraticCurveTo() | 2次ベジェ曲線を作成します。 |
| bezierCurveTo() | 3次ベジェ曲線を作成します。 |
| arc() | 円弧/曲線を作成します（円または部分円を作成するために使用）。 |
| arcTo() | 2つの接線間の円弧/曲線を作成します。 |
| isPointInPath() | 指定された点が現在のパス内にある場合は true を返し、それ以外の場合は false を返します。 |
変換
| メソッド | 説明 |
|---|---|
| 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 | 新しい画像を既存の画像にどのように描画するかを設定または返します。 |
その他
| メソッド | 説明 |
|---|---|
| save() | 現在の環境の状態を保存します。 |
| restore() | 以前に保存されたパスの状態とプロパティを返します。 |
| createEvent() | |
| getContext() | |
| toDataURL() |
標準プロパティとイベント
関連記事
HTML チュートリアル：HTML <canvas> 要素
その他の拡張