技術情報
CanvasRenderingContext2Dオブジェクト
canvasタグで2次元描画をするためのオブジェクトです。
要素(キャンバス).getContext('2d')でオブジェクトを取得します。

プロパティ
テキストの表示方向を設定または返します。
設定は "ltr"、"rtl"、"inherit"(デフォルト)のいずれかを設定します。

塗りつぶしの色、グラデーションパターンを設定または返します。

フォントを設定または返します。

Alpha値を設定または返します。Alpha値は 0~1 の間で設定します。

合成処理を設定または返します。
以下の値のいずれかを設定します。

source-atop
土台の画像は重なっていない部分のみが表示され、重ね合わせる画像は重なった部分のみが表示されます。
source-in
重ね合わせる画像は土台の画像の重なった部分のみが表示されます。土台の画像は表示されません。
source-out
重ね合わせる画像は土台の画像と重なっていない部分のみ表示されます。土台の画像は表示されません。
source-over (デフォルト)
重ね合わせる画像は全体が表示されますが、土台の画像は重なった部分のみ表示されません。
destination-atop
土台の画像は重なっている部分のみが表示され、重ね合わせる画像は重なっていない部分のみ表示されます。
destination-in
重なっている領域の土台の画像のみが表示されます。
destination-out
重なっていない部分の土台画像のみが表示されます。重ね合わせる画像は表示されません。
destination-over
土台の画像が前面に表示され、重ね合わせる画像は背面に移動し、重なっていない部分のみが表示されます。
lighter
土台の画像も重ね合わせる画像も表示されますが、重なった部分は双方の色を合成した色になります。
copy
重ね合わせる画像のみが表示され、土台の画像は表示されません。
xor
土台の画像と重ね合わせる画像の両方が表示されますが、重なっている部分は双方表示されません。

イメージをスムージングするかどうか示す真偽値を設定または返します。

描画線の両端の形状を設定または返します。
値は "butt"、"round"、"square" いずれかを設定しますが、それぞれの値の違いは下図のようになります。

点線のオフセットを設定または返します。

2つの線分を接続する際の接続点の形状を設定または返します。
以下の値のいずれかを設定します。

bevel
2つの線分の中心線が重なるところで接続され、接続点の先に発生する微小な三角領域も塗りつぶされます。
round
2つの線分の中心線が重なるところで接続され、接続点の先は、その接続点を中心にした線分の幅の1/2の半円で塗りつぶされます。
miter
2つの線分の中心線が重なるところで接続され、接続点の先は、各線分の外郭の線が重なるところまで塗りつぶされます。


線の幅を設定または返します。

lineJoinプロパティの"miter"において、接続点の先をどの程度の比率まで伸ばすかを設定または返します。
デフォルトは 10 です。

影のぼかしサイズを設定または返します。

影の色を設定または返します。

影のx軸方向への移動量を設定または返します。

影のy軸方向への移動量を設定または返します。

線の色、グラデーションパターンを設定または返します。

テキストの位置揃えを設定または返します。
以下のいずれかの値を設定します。

start
指定座標からテキストを表示します。
end
指定座標にテキストの終端が来るように表示します。
left
通常は start と同じです(canvasタグのスタイルにdirectionプロパティが設定されている場合のみ異なる場合があります)。
right
通常は end と同じです(canvasタグのスタイルにdirectionプロパティが設定されている場合のみ異なる場合があります)。
center
指定座標がテキストの中心に来るように表示します。

テキストのベースラインの位置揃えを設定または返します。
以下のいずれかの値を設定します。

top
日本語や英字の上端を表します。
hanging
topよりもやや下側を表します。
middle
日本語や英字の上下中央位置を表します。
alphabetic
英字の基準線を表します(bottomよりもやや上側を表します)。
ideographic
日本語の下端を表します。
bottom
英字の下端を表します(例:yやq)。


メソッド
円弧を描画します。

[引数]
  • 引数1
  • 中心のx座標
  • 引数2
  • 中心のy座標
  • 引数3
  • 半径
  • 引数4
  • 開始角(ラジアン)
  • 引数5
  • 終了角(ラジアン)
  • 引数6
  • true
    反時計回りに描画
    false
    時計回りに描画

[戻値]
なし

直前の座標(x0, y0)から太線で示されるような線が描画されます。


[引数]
  • 引数1
  • x1
  • 引数2
  • y1
  • 引数3
  • x2
  • 引数4
  • y2
  • 引数5
  • r

[戻値]
なし

現在のパスをリセットします。
描画を始める際に呼び出して描画を初期化するために用いられます。

[引数]
なし

[戻値]
なし

三次ベジェ曲線を描画します。
直前の座標(x0, y0)と1つめの制御点(x1, y1)を結ぶ直線に接し、かつ2つめの制御点(x2, y2)と終点(x3, y3)を結ぶ線分に接して、直前の座標(x0, y0)と終点(x3, y3)を結ぶ曲線を描画します。


[引数]
  • 引数1
  • x1
  • 引数2
  • y1
  • 引数3
  • x2
  • 引数4
  • y2
  • 引数5
  • x3
  • 引数6
  • y3

[戻値]
なし

指定した四角形の描画内容をクリアし、黒色で塗りつぶします。

[引数]
  • 引数1
  • 開始位置のx座標を設定します。
    引数2
    開始位置のy座標を設定します。
  • 引数3
  • クリアする幅を設定します。
  • 引数4
  • クリアする高さを設定します。

[戻値]
なし

現在のパスにクリッピング領域を生成します。

[引数]
なし

[戻値]
なし

現在の描画パスを閉じます。
このメソッドが呼び出された時点で、開始点までの接続線が結ばれ、線がクローズします。

[引数]
なし

[戻値]
なし

引数で指定したImageDataオブジェクトを生成します。
返されるオブジェクトの全ピクセルは透明の黒となります。

[引数]

[戻値]

指定した2点間での線形グラデーションを表すCanvasGradientオブジェクトを返します。

[引数]
  • 引数1
  • 始点のx座標
  • 引数2
  • 始点のy座標
  • 引数3
  • 終点のx座標
  • 引数4
  • 終点のy座標

[戻値]


指定した2つの円による円形グラデーションを表すCanvasGradientオブジェクトを返します。

[引数]
  • 引数1
  • 1つめの円の中心のx座標
  • 引数2
  • 1つめの円の中心ののy座標
  • 引数3
  • 1つめの円の半径
  • 引数4
  • 2つめの円の中心のx座標
  • 引数5
  • 2つめの円の中心ののy座標
  • 引数6
  • 2つめの円の半径

[戻値]

フォーカスリングを描きます。

[引数]
  • 引数1
  • HTMLタグ要素
  • 引数2
  • コントロールの中心ののx座標
  • 引数3
  • コントロールの中心ののy座標
  • 引数4 (省略可)
  • ユーザカスタム描画に関する真偽値を設定します。

[戻値]
真偽値

イメージを描画します。
このメソッドには3の引数パターンがあります。

[1] drawImage(引数1, ..., 引数3)
[引数]

[戻値]
なし

[2] drawImage(引数1, ..., 引数5)
[引数]

[戻値]
なし

[3] drawImage(引数1, ..., 引数9)
[引数]
  • 引数1
  • 描画イメージとして、HTML ImageオブジェクトHTML VideoオブジェクトHTML Canvasオブジェクトのいずれかを設定します。
  • 引数2
  • 引数1の描画イメージを切り取る開始点のx座標を設定します。
  • 引数3
  • 引数1の描画イメージを切り取る開始点のy座標を設定します。
  • 引数4
  • 引数1の描画イメージの切り取り幅を設定します。
  • 引数5
  • 引数1の描画イメージの切り取り高さを設定します。
  • 引数6
  • 描画を開始するx座標を設定します。
  • 引数7
  • 描画を開始するy座標を設定します。
  • 引数8
  • 描画の幅を設定します。
  • 引数9
  • 描画高さを設定します。

[戻値]
なし

楕円を描画します。

[引数]
  • 引数1
  • 楕円の中心点のx座標を設定します。
    引数2
    楕円の中心点のy座標を設定します。
  • 引数3
  • x軸方向の半径を設定します。
  • 引数4
  • y軸方向の半径を設定します。
  • 引数5
  • 開始角をラジアンで設定します。
  • 引数6
  • 終了角をラジアンで設定します。
  • 引数7
  • 半時計回りに描画するかどうかを示す真偽値を設定します。

[戻値]
なし

fillStyle属性で指定した色で描画中のパスで囲まれた領域を塗りつぶします。

[引数]
なし

[戻値]
なし

テキストを描画します。

[引数]
  • 引数1
  • テキストを設定します。
    引数2
    表示開始点のx座標を設定します。
  • 引数3
  • 表示開始点のy座標を設定します。
  • 引数4 (省略可)
  • 表示幅を設定します。幅を設定した場合はこの幅に収まるようにレンダリングされます。

[戻値]
なし

fillStyle属性で指定した色で指定した四角形を塗りつぶします。

[引数]
  • 引数1
  • 開始位置のx座標を設定します。
    引数2
    開始位置のy座標を設定します。
  • 引数3
  • 塗りつぶす幅を設定します。
  • 引数4
  • 塗りつぶす高さを設定します。

[戻値]
なし

引数で指定した矩形のImageDataオブジェクトを返します。

[引数]
  • 引数1
  • 矩形の開始点のx座標を設定します。
  • 引数2
  • 矩形の開始点のy座標を設定します。
  • 引数3
  • 矩形の幅を設定します。
  • 引数4
  • 矩形の高さを設定します。

[戻値]

点線の設定リストを返します。
点線の設定は [10, 5, ...] というような形で定義されます。

[引数]
なし

[戻値]
設定リスト

指定した座標が現在のパスの領域内にあるかどうかを示す真偽値を返します。

[引数]
  • 引数1
  • 調べる点のx座標を設定します。
    引数2
    調べる点のy座標を設定します。

[戻値]
真偽値

現在の座標位置から、引数1と引数2で指定する座標まで移動するとともに、線を描画します。

[引数]
  • 引数1
  • x座標
  • 引数2
  • y座標

[戻値]
なし

引数で指定したテキストのTextMetricsオブジェクトを返します。

[引数]
テキスト

[戻値]

描画地点を移動します。

[引数]
  • 引数1
  • x座標
  • 引数2
  • y座標

[戻値]
なし

ImageDataオブジェクトを描画します。

[引数]
  • 引数1
  • ImageDataオブジェクトを設定します。
  • 引数2
  • 描画を開始するx座標を設定します。
  • 引数3
  • 描画を開始するy座標を設定します。

[戻値]

二次ベジェ曲線を描画します。
直前の座標(x0, y0)と制御点(x1, y1)さらに終点(x2, y2)を結ぶ直線に接するような曲線を描画します。


[引数]
  • 引数1
  • x1
  • 引数2
  • y1
  • 引数3
  • x2
  • 引数4
  • y2

[戻値]
なし

矩形を描画します。

[引数]
  • 引数1
  • 開始点のx座標
  • 引数2
  • 開始点のy座標
  • 引数3
  • 引数4
  • 高さ

[戻値]
なし

スタックの最後に保存した描画状態を読み込み、コンテキストに復元します。

[引数]
なし

[戻値]
なし

指定した角度で座標を回転します。

[引数]
回転角をラジアンで設定します。

[戻値]
なし

現在の描画状態をスタックの最後に追加します。

[引数]
なし

[戻値]
なし

指定した倍率で座標を伸縮変形します。
倍率が 1 未満の場合は縮小、1 より大きい場合は伸張となります。

[引数]
  • 引数1
  • x軸方向の伸縮倍率
    引数2
    y軸方向の伸縮倍率

[戻値]
なし

点線の設定をします。
点線の設定は [10, 5, ...] というような形で定義されます。

[引数]
設定リスト

[戻値]
なし

描画中のパスを線分で描画します。

[引数]
なし

[戻値]
なし

strokeStyle属性で指定した色で指定した四角形を描画します。

[引数]
  • 引数1
  • 開始位置のx座標を設定します。
    引数2
    開始位置のy座標を設定します。
  • 引数3
  • 四角形の幅を設定します。
  • 引数4
  • 四角形の高さを設定します。

[戻値]
なし

テキストを輪郭線付きで描画します。

[引数]
  • 引数1
  • テキストを設定します。
    引数2
    表示開始点のx座標を設定します。
  • 引数3
  • 表示開始点のy座標を設定します。
  • 引数4 (省略可)
  • 表示幅を設定します。幅を設定した場合はこの幅に収まるようにレンダリングされます。

[戻値]
なし

座標マトリックスを変換します。

[引数]
引数1~引数6はマトリックスの要素を表し、以下のような関係があります。

引数1 引数3 引数5
引数2 引数4 引数6
0 0 1

[戻値]
なし

指定した移動量で座標を平行移動します。

[引数]
  • 引数1
  • x軸方向の移動量
    引数2
    y軸方向の移動量

[戻値]
なし