canvas:「2dコンテキスト」のメソッド・プロパティ一覧

HTML5で使用できるcanvasの「2dコンテキスト」について、そのメソッドやプロパティを一覧にしてまとめています。

(補足)2dコンテキストを取得するまでの記述は以下の通りです。


var canvas = document.getElementById("canvasID");
var context = canvas.getContext("2d");  // 2dコンテキスト取得

2dコンテクストのメソッド、プロパティ

メソッド
パス
beginPath()パスを開始
closePath()パスを閉じる
moveTo(x,y)x, yに移動
lineTo(x,y)x, yまで線を引く
描画
stroke()描画
fill()塗りつぶし描画
四角形
fillRect(x, y, width, height)塗りつぶし四角形
strokeRect(x, y, width, height)塗りつぶしでない四角形
clearRect(x, y, width, height)指定範囲の描画をクリア
テキスト
strokeText(str, x, y)テキストを描く
fillText(str, x, y)テキストを描く(塗りつぶし)
arc(x, y, r, s, e, c)
arc(x1, y1, x2, y2, r)点1と点2を半径rの円弧でつなぐ
clip()クリッピング(パスで切り抜き)
グラデーション
createLinearGradient(x1, y1, x2, y2)1から2にグラデーション
createRadialGradient(x1, y1, r1, x2, y2, r2)1から2にグラデーション
画像
drawImage(img, x, y)画像を描画
drawImage(img, x, y, width, height)画像を描画(widthとheightを指定)
createPattern(img, repeat)パターン作成
スケール
scale(x, y)変形(拡大縮小)
プロパティ
strokestyle線の色
lineWidth線の太さ
lineCap線の端(butt, round, square)
塗りつぶし
fillStyle塗りつぶしの色
フォント
fontフォント
shadowBlur
shadowColor影の色
shadowOffsetX影の幅
shadowOffsetY影の高さ
JavaScript入門