読者です 読者をやめる 読者になる 読者になる

復興ログ

未来の被災地にいるアナタと数十年後のキミたちへ。すべての記録を残します。

HTML5 canvas関連API

canvas要素が持つプロパティ/メソッド

プロパティ 説明
width キャンバスの領域の幅(ピクセル)。省略時は300ピクセル。canvasタグのwidth属性に対応。
height キャンバス領域の高さ(ピクセル)。省略時は150ピクセル。canvasタグのheitht属性に対応。
toDataURL(type,args) キャンバスの内容をdata URL文字列で取得。
getContext(cibtextId) 描画コンテキストを取得。引数に"2d"を指定すると、2次元グラフィックス用のコンテキストを取得出来る。

2D描画コンテキストが持つプロパティ/メソッド

2Dグラフィックスの描画を行うためのコンテキスト(canvas.getContext("2d")で取得可能)が持つプロパティやメソッドです。

プロパティ 説明
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の内容をキャンバスに書き出す。

CanvasGradient(グラデーション)が持つプロパティ/メソッド

プロパティ 説明
addColorStop(offset,color) グラデーションの境界色を指定。offsetには00.0から1.0の間の数値を指定する。0.0はグラデーションの起点を1.0は終点を表す。colorにはCSSのカラーを指定することが可能。

ImageDataが持つプロパティ/メソッド

プロパティ 説明
width 画像データの幅。
height 画像データの高さ。
data ピクセルデータを表した、数値(0〜255)からなる一次元配列。

参考書

HTML5&API入門

HTML5&API入門

リンク

  1. HTML5 基礎知識 - HTML5の基礎知識
  2. HTML5 canvas基礎 - canvasの基礎的な使い方
  3. canvas サンプル集 - 本エントリーで取り上げているcanvasのサンプル
広告を非表示にする