HTML5 canvas.getContext("2d") リファレンス
コンテキスト
canvas 要素には、自分で描画する能力を持っていません。
canvas は、JavaScriptを使用してすべてのピクセルを制御できる矩形の領域です。
HTML5 は、canvas 要素に getContext("2d") オブジェクトの組み込みオブジェクトを持っています。
getContext("2d") オブジェクトは、線、ボックス、円、などを描画するメソッドを持っています。
色とスタイル
属性 |
値 |
説明 |
fillStyle |
color/style |
描画の塗りつぶしの色。デフォルトは黒 |
strokeStyle |
color/style |
描画のストロークの色。デフォルトは黒 |
lineWidth |
number |
描画ストロークの幅。デフォルト は 1 |
lineCap |
butt
round
square |
線の終端のスタイル。デフォルトは butt |
lineJoin |
bevel
round
miter |
線の角のスタイル。デフォルトは miter |
miterLimit |
number |
線の角のの限界サイズ。デフォルト 10 |
shadowColor |
color |
影の色。デフォルトは黒 |
shadowOffsetX |
number |
影の水平距離。デフォルトは 0 |
shadowOffsetY |
number |
影の垂直距離で、デフォルトは 0 |
shadowBlur |
number |
ぼかし効果の大きさ。デフォルトは 0 |
メソッド |
説明 |
createPattern(obj,pattern) |
fillStyle または strokeStyle 属性で使用される画像からパターンを作成する |
createLinearGradient(x0,y0,z1,y1) |
gradient オブジェクトを作成する。
strokeStyle または fillStyle 属性の値としてこのオブジェクトを使用する |
createRadialGradient(x0,y0,r0,x1,y1,r1) |
円形の gradient オブジェクトを作成する。
strokeStyle または fillStyle 属性の値としてこのオブジェクトを使用する |
addColorStop(position,color) |
上記 gradient オブジェクトのメソッド。グラデーションの位置と色を指定する |
drawCustomFocusRing(element) |
|
drawSystemFocusRing(element) |
|
パス、曲線、円、矩形
メソッド |
説明 |
fillRect(x,y,w,h) |
fillStyle 属性の color/style を使用して塗し矩形を描画する |
strokeRect(x,y,w,h) |
strokeStyle 属性の color/style を使用して矩形の線を描画する |
clearRect(x,y,w,h) |
矩形領域をクリアする。この領域内のすべてのピクセルが消去される |
beginPath() |
新しいパスを開始するか、または現在のパスをクリアする |
moveTo(x,y) |
線を作成せずに、指定されたポイントへパスを移動する |
closePath() |
終点から始点へパスの線(パス)を作成する。パスの完了 |
lineTo(x,y) |
終点から、指定のポイントへ線を作成する |
rect(x,y,w,h) |
矩形を作成する |
fill() |
現在のパスを選択した色で塗りつぶす。デフォルトは黒 |
stroke() |
指定の path メソッドで記述したストローク/パスを作成する |
clip() |
キャンバスの唯一の可視エリアとなるエリアを作成する |
quadraticCurveTo(cpx,cpy,x,y) |
パス内の現在位置から指定したパスへ2次ベジエ曲線を作成する |
bezierCurveTo(cpx,cpy,cpx,cpy,x,y) |
パス内の現在位置から指定したパスへ3次ベジエ曲線を作成する |
arc(x,y,r,sAngle,eAngle,aClockwise) |
円、または円の一部を作成する。
Creates a circle, or parts of a circle |
arcTo(x1,y1,x2,y2,radius) |
2点間の円弧を作成する |
isPointInPath(x,y) |
指定の点がパスにある場合は true、それ以外は false であるブール値を返す |
変形
メソッド |
説明 |
scale(x,y) |
x および y パラメータに基づいて図面を伸縮する |
rotate(angle) |
指定の角度に基づいて図面を回転する |
translate(x,y) |
水平および垂直方向に図面を移動する |
transform(a,b,c,d,e,f) |
行列に基づいて図面の形状を変更する |
setTransform(a,b,c,d,e,f) |
現在の変形をクリアし、行列に基づいて図面の変更を行う |
Text
画像とピクセルの操作
合成
属性 |
値 |
説明 |
globalAlpha |
number |
図面の透明度を指定する |
globalCompositeOperation
source-atop
source-in
source-out
source-over
destination-atop
destination-in
destination-out
destination-over
lighter
copy
xor
vendorName-operationName
|
図形や図面をキャンバスに配置する方法を指定する。デフォルトは source-over |
|