◀ 3.

直線・曲線(パスでの描画)

編集

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 . fill() 

現在の塗りつぶしスタイルでサブパスを塗りつぶす

context . stroke()

現在の線スタイルでサブパスを輪郭表示する

 

パスで切り抜き

context . clip()

パスで切り抜きする

 

パスの確認

context . isPointInPath(x, y)

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

 

編集
Post Share
子ページ

子ページはありません

同階層のページ
  1. 図形
  2. 色
  3. 直線・曲線(パスでの描画)
2026-05-15 05:24:41 guest 278

人気ページ

最近更新/作成されたページ