◀ 3.

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

編集

ページの作成

テンプレートを更新

ページの作成

親となるページを選択してください。

ページは必ず何かしらの親ページに紐づきます。
親ページに紐づくページを子ページといいます。
例：親=スポーツ, 子1=サッカー, 子2=野球

子ページを親ページとして更に子ページを作成することも可能です。
例：親=サッカー, 子=サッカーのルール

親ページはいつでも変更することが可能なのでとりあえず作ってみましょう！

テンプレート

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()	現在の線スタイルでサブパスを輪郭表示する