| プロパティ |
説明 |
| canvas |
この描画コンテキストの基になったcanvas要素への参照。 |
| save() |
描画コンテキストの状態をスタックのトップに保存する。 |
| restore() |
描画コンテキストの状態をスタックのトップから復元 |
| scale(x,y) |
横方向の倍率xと縦方向の倍率yを与えることで、グラフィックの拡大・縮小を行なう。 |
| translate(x,y) |
横方向の差分xと縦方向の差分yを与えることで、座標を変更することができる。 |
| transform(m11,m12,m21,m22,dx,dy) |
座標変換マトリックスに直接変更を加える。複数回呼び出すと、同じ変換マトリックスに対して変更が何度も適用される。 |
| setTransform(m11,m12,m21,m22,dx,dy) |
座標変換マトリックスを初期化した後、渡された引数でtransform()の呼び出しを行なう。 |
| globalAlpha |
線や塗りつぶしを行なう際の透明度を、0.0から1.0の間で指定する(デフォルトは1.0) |
| globalCompositeOperation |
描画領域が重なった際の挙動を指定 |
| strokeStyle |
線を描画する際のスタイル。デフォルトは黒。 |
| fillStyle |
塗りつぶしを行なう際のスタイル。デフォルトは黒。 |
| createLinearGradient(x0,y0,x1,y1) |
線形グラデーションを作成。(x0,y1)で指定した座標から、(x1,y1)に向かって直線的に色合いが変化していく |
| createRadialGradient(x0,y0,r0,x1,y1,r1) |
円形グラデーションを作成。(x0,y0)を中心としてr0を半径とする円と、(x1,y1)を中心としてr1を半径とする円の間が、グラデーションによって塗りつぶされる。 |
| createPattern(image,repetition) |
指定されたグラフィックス要素を用いて、線や塗りつぶしのパターンを作成する。 |
| lineWidth |
線の太さをピクセル単位で指定する。デフォルトは1ピクセル。 |
| lineCap |
線の終端のスタイルを指定する。"butt"、"round"、"square"のいずれかを指定可能(デフォルトは"butt") |
| lineJoin |
線が交差して出来る角のスタイルを指定する。"round"、"bevel"、"miter"のいずれかを指定可能(デフォルトは"miter") |
| shadowOffsetX |
影を表示する位置のX座標。対象から何ピクセル離れているかを指定(デフォルトでは0)。 |
| shadowOffsetY |
影を表示する位置のY座標。対象から何ピクセル離れているかを指定(デフォルトでは0)。 |
| shadowBlur |
影のぼかし幅(デフォルトでは0)。 |
| shadowColor |
影の色。CSSカラーの形式に則った文字列を指定できる(デフォルトでは透明)。 |
| clearRect(x,y,w,h) |
指定した四角形の領域をクリアする。(x,y)が四角形の左上の頂点となり、wは四角形の幅、hは高さを表す。 |
| beginPath() |
新たにパス描画を開始する。それまでに描いていたパスはすべてリセットされる。 |
| ClosePath |
パスが閉じられていない場合、最後に描画したサブパスの終点から、パスの始点に向かって直線を引くことでパスを自動的に閉じる。 |
| move(x,y) |
サブパスの描画を開始する座標を移動する。 |
| lineTo(x,y) |
現在の点と指定した座標を結ぶ直線を描画。 |
| quadraticCurveTo(cpx,xpy,x,y) |
二次ベジェ曲線を描画。現在位置と、引数で渡された座標(x,y)をつなぐ曲線を描画し、曲線のカーブは(cpx,xpyの座標によって決まる)。 |
| bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y) |
三次ベジェ曲線を描画。制御点は引数で渡した3つの座標と、現在の座標になる。 |
| arcTo(x1,y1,x2,y2,radius) |
直線とそれに接する円弧を描画 |
| rect(x,y,w,h) |
直線とそれに接する円弧を描画。 |
| arc(x,y,radius,startAngle,endAngle,anticlockwise) |
円弧を描く。完全な円を描くことも、その一部である曲線を描くことも可能 |
| fill() |
パス内部を塗りつぶす。塗りつぶしの色やスタイルは、fillStyleプロパティによって指定できる。 |
| stroke() |
パスを線として表示。線の色やスタイルはstrokeStyleプロパティによって指定することが可能。 |
| clip() |
パスの内部をクリッピング領域として指定。クリッピング領域はbeginPath()を呼び出すことで解除が出来る。 |
| isPointInPath(x,y) |
指定されたポイントが、現在のパス上に存在するかどうかを返す。 |
| font |
CSSのfontプロパティと同様で、テキストフォントを指定(デフォルトは"10px sans-serif")。 |
| textAlign |
文字列の横方向の表示位置を指定。 |
| textBaseLine |
テキストが表示される位置のベースラインを指定。 |
| fillText(text,x,y,maxWidth) |
指定した文字列を、(x,y)を基準とした位置に描画。塗りつぶしのみを行なう。maxWidthを指定すると、文字列の横幅がその値に合わせて縮小される。 |
| strokeText(text,x,y,maxWidth) |
指定した文字列を、(x,y)を基準とした位置に描画。枠線の描画のみを行なう。 |
| measureText(text) |
現在のフォントを用いて文字列を描画した場合の各種情報を測定できる。 |
| drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh) |
指定されたグラフィック要素をキャンバスに書き出す。 |
| createImageData(sw,sh) |
幅widht、高さheightからなるImageDataを作成。ImageDataは透明に初期化されている。 |
| getImageData(sx,sy,sw,sh) |
現在のキャンバスに描画されている画像をImageDataとして取得。(x,y)を左端上の頂点とし、幅width、高さheightの四角形からなる範囲のビットマップが対象となる。 |
| putImageData(imagedata,dx,dy,dirtyX,dirtyY,dirtyWidth,dirtyHeight) |
imagedataの内容をキャンバスに書き出す。 |
