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 | 影の高さ |