◀ 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()

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

 

パスで切り抜き

context . clip()

パスで切り抜きする

 

パスの確認

context . isPointInPath(x, y)

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

 

子ページ
子ページはありません
同階層のページ
  1. 図形
  2. 色
  3. 直線・曲線(パスでの描画)

人気ページ

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

最近コメントのあったページ

最近の質問

コメント一覧

コメントがありません

ログインしなければコメント投稿はできません。