タイトル: 直線・曲線・多角形・円
Canvasでの直線・曲線・多角形・円の描き方
パス
| context . beginPath() |
現在のパスをリセットする |
| context . moveTo(x, y) |
指定の地点で新規のサブパスを生成する |
| context . closePath() |
最終座標と開始座標を結んでパスを閉じる |
直線（多角形）
| context . lineTo(x, y) |
現在のパスに指定の地点を加え、直前の地点を直線で接続する |
ベジェ曲線
| context . quadraticCurveTo(cpx, cpy, x, y) |
2次ベジェ曲線を引く |
| context . bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) |
3次ベジェ曲線を引く |
円と円弧
| context . arcTo(x1, y1, x2, y2, radius) |
直前の座標と直線でつながる円弧を作成する |
| context . arc(x, y, radius, startAngle, endAngle [, anticlockwise ] ) |
円弧を作成する |
四角
| context . rect(x, y, w, h) |
四角形を作成する |
パスのスタイル
|
context . fill() |
現在の塗りつぶしスタイルでサブパスを塗りつぶす |
|
context . stroke() |
現在の線スタイルでサブパスを輪郭表示する |
パスで切り抜き
|
context . clip() |
パスで切り抜きする |
パスの確認
|
context . isPointInPath(x, y) |
座標がパスの内側にあるかどうかを確認する |