この内容は古いバージョンです。最新バージョンを表示するには、戻るボタンを押してください。
バージョン:2
ページ更新者:guest
更新日時:2017-08-18 06:06:23

タイトル: 直線・曲線・多角形・円

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)

座標がパスの内側にあるかどうかを確認する