beginPath()メソッド

CanvasRenderingContext2D beginPath()メソッド

概要

 状態:-  閲覧数:862  投稿日:2014-06-15  更新日:2016-08-29  
現在のパスをリセットする際に使用
・“現在のパスをリセットする” 役割しか保持しない
・実際にパスや図形を作成するには、 moveTo(x, y)・ lineTo(x, y)・ closePath()などのメソッドを併用する必要がある
・作成したパスを画面上に描画するには、 stroke()・ fill() などのメソッドを併用する必要がある

構文
CanvasRenderingContext2Dオブジェクト.beginPath();

引数
・なし

戻り値
・なし

パス

 閲覧数:379 投稿日:2014-06-15 更新日:2014-06-15 

パスとは?


0個以上のサブパスの集まり
・0個以上のサブパスで構成されている

サブパスとは?
・直線又は曲線で接続された1つ以上の点のリスト
・サブパスが閉じているかどうかを示すフラグが含まれている

サブパスが閉じているとは?
・サブパスの最後の点が最初の点に直線で繋がっている(何らかの図形となっている)


パスを開始する最初の状態


CanvasRenderingContext2Dオブジェクトのデフォルトパス仕様
・サブパスを持たない
・0個のサブパスを持つ
・まだ描画されていない状態のパスを、常に1つだけ持っている

beginPath()メソッドで“現在のパスをリセットする”とは?
・CanvasRenderingContext2Dオブジェクトのサブパスのリストを空にして、 サブパスを持たない状態にセットし直す


その他


・点の数が2未満のサブパスは、パスを描画する際には無視される

使用例

 閲覧数:310 投稿日:2015-11-22 更新日:2015-11-23 
▼index.html
<canvas id="canv" width="500px" height="500px"></canvas>


▼render.js
var ctx = document.getElementById("canv").getContext('2d');

ctx.beginPath();



コメント投稿(ログインが必要)



週間人気ページランキング / 3-21 → 3-27
順位 ページタイトル抜粋 アクセス数
1 フォーム | その他 7
2 WebGL2RenderingContext 2
2 HTML5用語 2
3 シェーダー | compileShader()メソッド(WebGLRenderingContext) 1
3 arc()メソッド | CanvasRenderingContext2D 1
3 WebGLShader 1
2024/3/28 1:01 更新