説明
HTML5 <canvas>タグは、スクリプト（通常はJavaScript）を経由して、その場で、グラフィックスを描画するために使用されます。
しかし、 <canvas>要素は、（それがグラフィックスのための唯一のコンテナです）自分自身の描画能力を持っていない-あなたが実際にグラフィックスを描画するためにスクリプトを使用する必要があります。
getContext()メソッドは、キャンバス上に描画するためのメソッドとプロパティを提供するオブジェクトを返します。
このリファレンスは、プロパティとメソッドについて説明しますgetContext("2d")キャンバスに-テキスト、線、ボックス、円などを描画するために使用できるオブジェクトを、。
ブラウザのサポート
表中の数字は、完全に要素をサポートする最初のブラウザのバージョンを指定します。
| 素子 | |||||
|---|---|---|---|---|---|
| <canvas> | 4.0 | 9.0 | 2.0 | 3.1 | 9.0 |
Internet Explorer 9の、Firefoxの、オペラ、クロム、およびSafariのサポート<canvas>とそのプロパティとメソッド。
注：Internet Explorer 8の以前のバージョンをサポートしていない<canvas>要素を。
色、スタイル、および影
| プロパティ | 説明 |
|---|---|
| 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() | 次ベジェ曲線を作成します。 |
| arc() | （円、または円の一部を作成するために使用される）アーク/カーブを作成します。 |
| arcTo() | 2接線との間にアーク/カーブを作成します。 |
| isPointInPath() | 指定された点は、電流経路にそれ以外の場合はfalseの場合、trueを返します |
変換
| 方法 | 説明 |
|---|---|
| scale() | 現在の図面が大きくなったり小さくスケーリングします |
| rotate() | 現在の図面を回転させます |
| translate() | キャンバス上の（0,0）の位置を再マッピング |
| transform() | 描画のための現在の変換行列を置き換え |
| setTransform() | 電流が単位行列に変換をリセットします。 次に実行されます）（変換 |
テキスト
| プロパティ | 説明 |
|---|---|
| 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() |