HTML Canvas リファレンス

説明

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

しかし、<canvas> 要素自身は描画能力を持っていません（グラフィックス用のコンテナであるだけです） - 実際にグラフィックスを描画するためにはスクリプトを使用する必要があります。

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

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

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

Element
<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	最大マイター長（折れ線箇所を面取りしないで尖らせる長さの限界長）を設定または返します

メソッド	説明
rect()	矩形を作成します
fillRect()	「塗り潰し」矩形を描画します
strokeRect()	矩形を描画します (塗り潰されていない)
clearRect()	指定された矩形内の指定されたピクセルをクリアします

メソッド	説明
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	テキストを描画するときに使用した、現在のテキストのベースラインを設定または返します

メソッド	説明
fillText()	キャンバス上に「塗り潰し」テキストを描画します
strokeText()	キャンバス上にテキストを描画します（塗り潰しません）
measureText()	指定されたテキストの幅を含むオブジェクトを返します

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

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

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

プロパティ	説明
globalAlpha	図面の現在のアルファ値、または透明度の値を設定または返します
globalCompositeOperation	新しい画像を既存の画像の上へどのように描画するかを設定または返します