Canvasオブジェクト
Canvasオブジェクトは、HTML5で新しく追加されました。
HTML5 <canvas>タグは、JavaScriptで、その場で、グラフィックスを描画するために使用されます。
Canvasオブジェクトへのアクセス
あなたはアクセスすることができ<canvas>使用して要素をgetElementById() ：
Canvasオブジェクトを作成します。
あなたは、作成することができ<canvas>使用して要素をdocument. createElement() document. createElement()メソッド：
注意： <canvas>要素は、それ自身の描画能力を（それはグラフィックスのための唯一のコンテナです）持っていない-あなたが実際にグラフィックスを描画するためにスクリプトを使用する必要があります。
getContext()メソッドは、キャンバス上に描画するためのメソッドとプロパティを提供するオブジェクトを返します。
この参考文献は、プロパティとメソッドカバーするgetContext("2d")キャンバス上-テキスト、線、ボックス、円、などを描画するために使用できるオブジェクトを、。
色、スタイル、および影
| プロパティ | 説明 |
|---|---|
| fillStyle | セットまたは図面を埋めるために使用される色、勾配、またはパターンを返します |
| strokeStyle | セットまたはストロークのために使用される色、勾配、またはパターンを返します |
| shadowColor | 設定または影に使用する色を返します。 |
| shadowBlur | 設定またはシャドウのぼかしレベルを返します。 |
| shadowOffsetX | 設定または形状から影の水平距離を返します |
| shadowOffsetY | 設定または形状から影の垂直距離を返します |
| 方法 | 説明 |
|---|---|
| createLinearGradient() | 直線勾配を作成する(to use on canvas content) |
| createPattern() | 指定された方向に指定された要素を繰り返します |
| createRadialGradient() | ラジアル/円形状のグラデーションを作成する(to use on canvas content) |
| addColorStop() | 勾配オブジェクトの色や停止位置を指定します |
ラインスタイル
| プロパティ | 説明 |
|---|---|
| lineCap | 設定またはラインのエンドキャップのスタイルを返します。 |
| lineJoin | 2行は満たして設定または作成されたコーナーの型を返し、 |
| lineWidth | 設定または現在の線幅を返します。 |
| miterLimit | 設定または最大マイター長さを返します |
四角形
| 方法 | 説明 |
|---|---|
| rect() | 長方形を作成します。 |
| fillRect() | 描く"filled"矩形を |
| strokeRect() | 四角形を描画(no fill) |
| clearRect() | 所定の矩形内の指定されたピクセルをクリア |
パス
| 方法 | 説明 |
|---|---|
| fill() | 現在の図面塗りつぶし(path) |
| stroke() | 実際にあなたが定義したパスを描画します |
| beginPath() | パスを開始し、または現在のパスをリセットします |
| moveTo() | ラインを作成せず、キャンバス内の指定されたポイントへのパスを移動 |
| closePath() | 出発点に戻って、現在の点からパスを作成します |
| lineTo() | 新しいポイントを追加し、キャンバスの最後の指定された点に、その点からラインを作成します |
| clip() | クリップ元のキャンバスから任意の形状およびサイズの領域 |
| quadraticCurveTo() | 二次ベジェ曲線を作成します。 |
| bezierCurveTo() | 立方ベジエ曲線を作成します。 |
| arc() | アーク/曲線作成(used to create circles, or parts of circles) |
| arcTo() | 2つの接線間のアーク/曲線を作成 |
| isPointInPath() | 指定された点は、電流経路にそうでない場合はfalseである場合にtrueを返します |
変換
| 方法 | 説明 |
|---|---|
| scale() | 現在の図面が大きくなったり小さくスケール |
| rotate() | 現在の図面を回転します |
| translate() | リマップ(0,0)キャンバス上の位置を |
| transform() | 図面の現在の変換行列を置き換え |
| setTransform() | 現在は、単位行列に変換をリセットします。 次に実行されますtransform() |
テキスト
| プロパティ | 説明 |
|---|---|
| font | 設定またはテキストコンテンツの現在のフォントプロパティを返します。 |
| textAlign | 設定またはテキストコンテンツの現在の配置を返します。 |
| textBaseline | 設定またはテキストを描画するときに使用される現在のテキストのベースラインを返します。 |
| 方法 | 説明 |
|---|---|
| fillText() | 描く"filled"キャンバス上のテキストを |
| strokeText() | キャンバス上にテキストを描画します(no fill) |
| measureText() | 指定されたテキストの幅を含むオブジェクトを返します。 |
イメージ図
| 方法 | 説明 |
|---|---|
| drawImage() | キャンバス上に画像、キャンバス、またはビデオを描画します |
ピクセル操作
| プロパティ | 説明 |
|---|---|
| width | ImageDataオブジェクトの幅を返します。 |
| height | ImageDataオブジェクトの高さを返します。 |
| data | 指定されたのImageDataオブジェクトの画像データを含むオブジェクトを返します。 |
| 方法 | 説明 |
|---|---|
| createImageData() | 新しい、空白のImageDataオブジェクトを作成します。 |
| getImageData() | ImageDataをオブジェクトを返すことをキャンバス上のコピー指定された矩形のピクセルデータを |
| putImageData() | 画像データを置く(from a specified ImageData object)キャンバス上にバック |
コンポジット
| プロパティ | 説明 |
|---|---|
| globalAlpha | セットまたは図面の現在のアルファまたは透明度の値を返します |
| globalCompositeOperation | 新しいイメージが既存の画像上に描画されるかを設定または返します |
他の
| 方法 | 説明 |
|---|---|
| save() | 現在のコンテキストの状態を保存します |
| restore() | 以前に保存したパスの状態と属性を返します。 |
| createEvent() | |
| getContext() | |
| toDataURL() |
標準プロパティおよびイベント
キャンバスオブジェクトは、標準サポートのプロパティとイベントを 。
関連ページ
HTMLチュートリアル： HTML5キャンバス
HTMLリファレンス： HTML <canvas>タグ