canvasの主な機能

以下のmethodは描画の準備と実行に必要である。

beginPath();	描画開始
closePath();	描画終了
stroke();	線を描画
fill();	塗りつぶし

 

以下のmethodにより形状を指定することができる。x,y,w,hはx座標、y座標、幅、高さを,ピクセル数で指定する。rs, reは角度をrad(ラジアン)で指定する。

moveTo(x, y);	ペンを移動
lineTo(x, y);	線を描画
rect(x,y,w,h);	矩形
fillRect(x, y, w, h);	塗りつぶした矩形
clearRect(x, y, w, h);	矩形の穴

 

以下の関数では円弧を描画する。rは半径、rsは開始角度(rad)、reは終了角度(rad)

arc(x,y,r,rs,re,sw)

sw=trueで反時計回り、sw=falseなら時計回り 角度、rsからre(単位はラジアン)の円弧を描画する。

 

以下のmethodにより塗りつぶしの色、輪郭、影を指定することができる。

fillStyle = 'rgb(0,255,0)';	塗りつぶしの色を指定する。-> 文字列処理と色の指定
createLinearGradient(x0,y0,x1,y1);	一方向のグラデーション
createRadialGradient(x0,y0,r0,x1,y1,r1);	放射状のグラデーション
addColorStop(r,'rgb(r,g,b)')	グラデーションで rの一の色を'rgb(r,g,b)'に設定
lineWidth=w	線の幅
shadowColor=c shadowOffsetX=x shadowOffsetY=y shadowBlur=b	影 (色=c, ずれ=(x,y), ぼかし=b)

 

以下のmethodを用いてcanvas上にも位置を指定して文字を描画できる。

fillText(text, x, y [, maxWidth ] ) strokeText(text, x, y [, maxWidth ] )

塗りつぶしで文字列を表示 展開して文字列を表示。

 

以下のmethodを用いて描画におけるさまざまな効果を指定することができる。

shadowOffsetX, shadowOffsetY, shadowBlue
setTransform