| メソッド名/プロパティ | 説明 |
|---|---|
getImageData(x,y,w,h) |
指定領域のピクセルデータを取得する. 戻り値は ImageData オブジェクト |
putImageData(imageData, dx, dy) |
指定した ImageData をキャンバスに描画する. |
createImageData(w, h) |
幅と高さを指定して空のピクセルデータを作成する. |
toDataURL() |
キャンバスの内容を Base64 エンコードされた画像データに変換する. |
| メソッド名/プロパティ | 説明 |
|---|---|
clip() |
現在のパスをクリッピング領域として設定する. |
isPointInPath(x, y) |
指定された点が現在のパス内にあるかどうかを判定する. |
isPointInStroke(x, y) |
指定された点が現在のパスの線上にあるかどうかを判定する. |
| メソッド名/プロパティ | 説明 |
|---|---|
moveTo(x, y) |
新しい描画の開始位置を設定する. |
lineTo(x, y) |
現在の位置から指定の位置まで線を引く. |
stroke() |
線を描画する. |
fill() |
パスの内部を塗りつぶする. |
lineWidth |
線の太さを指定する. |
strokeStyle |
線の色を指定する. |
fillStyle |
塗りつぶしの色を指定する. |
beginPath() |
新しいパスを開始する. |
closePath() |
現在のパスを閉じる. |
| メソッド名/プロパティ | 説明 |
|---|---|
| rect(x, y, w, h) | 長方形を指定の位置とサイズで描く. |
| arc(x, y, r, startAngle, endAngle, counterclockwise) | 円弧や円を描く. |
| arcTo(x1, y1, x2, y2, radius) | 2つの点をつなぐ円弧を描く. |
| ellipse(x, y, rx, ry, rotation, startAngle, endAngle, counterclockwise) | 楕円を描描く. |
| clearRect(x, y, w, h) | 指定した領域を消去（透明に） |
| fillRect(x, y, w, h) | 塗りつぶされた長方形を描く. |
| strokeRect(x, y, w, h) | 枠線だけの長方形を描く. |
<canvas></canvas>タグはブラウザ上で線 / 図形 / アニメーションを表示するための「エリア」を確保するタグ.
＊ 他の HTML 要素にはない canvas のユニークな特徴 → データ(操作内容)を
JavaScript で記述 / 制御する.
.getContext("2d"); これは canvas を使うときの入り口.
＊ canvas の size は何も設定していなければ,
デフォルト width:300px / height:150px に設定される.
＊ canvas は解像度に基づいて線や図形を表示するため,
style (CSS) でサイズを変更(大きく)するとピクセルが拡大されてしまう.
その結果, 画像がぼやけたり不鮮明になってしまうので,
範囲は attribute で設定することが望ましい.
