直線を描く[beginPath][moveTo][canvas]

2017年3月19日

パスを利用して直線を描きます。直線を描く一連の流れは以下のようになります。

 

1. beginPath(); //パスを初期化
2. moveTo(); //サブパスのスタート時点
3. lineTo(); //前の点からの終点を指定
4. stroke(); //描画

 

デモ画面

 

 

7行目
beginPath()メソッドでパスを初期化しています。

 

8行目
moveTo()メソッドでパスを開始しています。正確にはパスとは直線や曲線の総称で、点と点を結ぶ直線や曲線を「サブパス」と呼びます。moveTo()メソッドは1つ目のサブパスの起点を指定しています。

 

9行目
lineTo()メソッドでスタート地点からの終点を指定しています。これで1つ目のサブパスが生成されます。10行目のlineTo()メソッドで2つ目のサブパスが生成されます。

 

11行目
stroke()メソッドで描画をしています。

上記のような閉じていないパスはオープンパスと呼ばれます。逆に閉じたパスをクローズパスと呼びます。

 

次に上記で描いたパスを連結させてクローズパスとし、その中を緑で塗りつぶしてみます。

 

デモ画面

 

 

11行目

closePath()メソッドでパスを連結させています。最後のサブパスの終点と、最初のサブパスの始点を直線で結びます。

 

14行目
fill()メソッドでパスの内部を塗りつぶしています。

 

 

関連ページ

四角形(矩形)を表示させる

 

 

スポンサーリンク

 

Copyright © 2017 ウェブの葉 All Rights Reserved.  プライバシーポリシー