HTML Canvas リファレンス

説明

HTML5 <canvas> タグは、スクリプト（通常 JavaScript）を使用して、その場でグラフィックスを描画します。

しかし、<canvas> 要素には独自の描画能力がありません（グラフィックスのコンテナであるのみです） - 実際にグラフィックを描画するには、スクリプトを使用しなければなりません。

getContext() メソッドは、キャンバスに描画するためのメソッドとプロパティを提供するオブジェクトを返します。

このリファレンスでは、キャンバスにテキスト、線、ボックス、円などを描画するために使用できる、 getContext("2d") オブジェクトのプロパティとメソッドについて説明します。

表の数字は、要素を完全にサポートした最初のブラウザのバージョンを示しています。

要素
<canvas>	4.0	9.0	2.0	3.1	9.0

Internet Explorer 9、Firefox、Opera、Chrome、Safari は、<canvas> とそのプロパティとメソッドをサポートしています。

注: Internet Explorer 8 とそれ以前のバージョンは、<canvas> 要素をサポートしていません。

プロパティ	説明
fillStyle	図形を塗りつぶすための色、グラデーション、またはパターンを設定するか、または設定状態を返します
strokeStyle	ストロークに使用する色、グラデーション、またはパターンを設定するか、または設定状態を返します
shadowColor	影に使用する色を設定するか、または設定状態を返します
shadowBlur	影のぼかしレベルを設定するか、または設定レベルを返します
shadowOffsetX	形状から影までの水平距離を設定または返します
shadowOffsetY	形状から影までの垂直距離を設定または返します

メソッド	説明
createLinearGradient()	キャンバスコンテンツに使用する線形グラデーションを作成します
createPattern()	指定の要素を指定の方向に繰り返します
createRadialGradient()	キャンバスコンテンツに使用する放射状/円形のグラデーションを作成します
addColorStop()	グラデーションオブジェクトの色とカラーストップの位置を指定します

プロパティ	説明
lineCap	線のエンドキャップのスタイルを設定するか、または設定状態を返します
lineJoin	2 つの線が交差したときに作成されるコーナの種類を設定するか、または設定状態を返します
lineWidth	現在の線の幅を設定するか返します
miterLimit	最大マイター長を設定するか返します

メソッド	説明
fill()	現在の図形（パス）を塗りつぶします
stroke()	実際に定義したパスを描画します
beginPath()	パスを開始するか、現在のパスをリセットします
moveTo()	線を作成せずにキャンバス内の指定されたポイントにパスを移動します
closePath()	現在のポイントから開始ポイントに戻るパスを作成します
lineTo()	新しいポイントを追加し、キャンバス内の最後に指定されたポイントからそのポイントへの線を作成します
clip()	元のキャンバスから任意の形状とサイズの領域を切取ります
quadraticCurveTo()	二次ベジェ曲線を作成します
bezierCurveTo()	三次ベジェ曲線を作成します
arc()	円弧または曲線を作成します（円または円の一部を作成するために使用します）
arcTo()	2 つの接線間に円弧/曲線を作成します
isPointInPath()	指定した点が現在のパスにある場合は true を、そうでない場合は false を返します

。。。

メソッド	説明
scale()	現在の図形を拡大または縮小します
rotate()	現在の図形を回転する
translate()	キャンバスの (0,0) の位置を再設定します
transform()	図形の現在の変形マトリックスを置換します
setTransform()	現在の変形を単位行列にリセットし、次に transform() を実行します

プロパティ	説明
font	テキストコンテンツの現在のフォントプロパティを設定するか、または設定状態を返します
textAlign	テキストコンテンツの現在の配列を設定するか、または設定状態を返します
textBaseline	テキストを描画するときに使用される現在のテキストのベースラインを設定するか、または設定状態を返します

メソッド	説明
drawImage()	キャンバスに画像、キャンバス、またはビデオを描画します

プロパティ	説明
width	ImageData オブジェクトの幅を返します
height	ImageData オブジェクトの高さを返します
data	指定した ImageData オブジェクトの画像データを含むオブジェクトを返します

メソッド	説明
createImageData()	新しい空の ImageData オブジェクトを作成します
getImageData()	キャンバス上の指定した矩形のピクセルデータをコピーする ImageData オブジェクトを返します
putImageData()	指定した ImageData オブジェクトから、イメージデータをキャンバスに戻します

プロパティ	説明
globalAlpha	描画の現在のアルファ値または透明度の値を設定するか、または設定状態を返します
globalCompositeOperation	既存の画像に新しい画像を描画する方法を設定するか、または設定方法を返します