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

ツール・書籍紹介

まとめ・一覧

基本編

数値

文字列

正規表現

日付・時刻

配列

関数

オブジェクト指向

DOM操作

API

便利な小技集

用語

実践編

関連サイト