beginPath の機能は非常に単純で、新しいパスを開始することですが、キャンバス描画を使用するプロセスでは非常に重要です。
まずは小さなコードを見てみましょう。
var ctx=document.getElementById(canvas).getContext(2d); ctx.rect(150,150,100,100); .fillStyle=黄色; ctx.fill();
コードにはエラーはありませんが、緑色と黄色の 1 つではなく、一辺の長さが 100 ピクセルの黄色の正方形が 2 つ表示されます。これはなぜですか?
実際、canvas の描画メソッド (fill、stoke) は、最後の beginPath の後にすべてのパスを描画します。最初の長方形は 2 回塗りつぶされ、1 回目は緑色で、2 回目は黄色になります。つまり、2 つの黄色の長方形になります。同様に、線分、その他の曲線、またはグラフィックスを描画する場合、どこに移動しても、 beginPath がない限り、パスを描画することになります。
描画したグラフィックスが想像していたものと一致しない場合は、必ず beginPath を確認してください。
beginPath について話すとき、closePath について言及する必要があります。実際、closePath はパスを閉じることを意味し、パスの終点を始点に接続するだけです。 、新しい道を始めるのではありません。
上記のコードの最初の入力の後に closePath を追加しますが、それでも 2 つの黄色の四角形が表示されます。
ただし、後で beginPath を追加すると、異なる色の 2 つの長方形が得られます。
要約すると、パスの一部を閉じて新しいパスを開始しようとしないでください。パスを閉じないと、新しいパスを開始したとしても閉じられません。
補足：キャンバスのBeginpathとClosepathについてbeginPath() メソッド
var ctx = ドキュメント. getContext ( '2d' ) ; ctx. ストローク ( 200.5 ) ; ;ctx .moveTo(100.5, 40.5); ctx.lineTo ( 200.5 , 40.5 ) ctx. ストロークスタイル = '#f00' ;
0.5 は、ぼやけた線を避けるためのものです。では、上記のコードはどのようなグラフィックスを取得するのでしょうか?黒線と赤線でしょうか？
コードの観点からは、ロジックに問題はありませんが、結果として、黒と赤の 1 本ではなく、2 本の赤い線が得られます。
その理由が理解できれば、残りを読む必要はありません。これが beginPath の重要性です。
キャンバス内の描画メソッド (ストローク、塗りつぶしなど) は、最後の beginPath 以降のすべてのパスに基づいて描画します。たとえば、上記のコードでは 2 回ストロークしました。実際、これら 2 回のストロークは最初の beginPath 以降のすべてのパスに基づいています。つまり、最初のパスを 2 回ストロークし、1 回目のストロークは黒で、2 回目のストロークは赤になったので、最終的には赤になりました。
1. moveTo を使用してブラシを移動する場所に関係なく、beginPath を実行しない限り、常にパスを描画することになります。
2. fillRect やストロークRect などの独立した領域を直接描画する関数は、現在のパスを中断しません。
描画したグラフィックスが想像していたものと異なる場合は、適切な beginPath があるかどうかを忘れずに確認してください。
-------
beginPath について言えば、closePath についても触れなければなりません。この 2 つは密接に関連していますか?答えはほとんど何もありません。
closePath はパスを終了するという意味ではなく、現在のパスの終点から始点までパスを接続してパス全体を閉じようとします。ただし、この後のパスが新しいパスであるという意味ではありません。
上記のコードの最初の lineTo の後に closePath を追加しますが、それでも 2 つの赤い線が表示されることがわかります。
しかし、最初のストロークの後に beginPath を追加すると、予想どおり黒い線と赤い線が得られます。
ctx.ストローク ( ) ; // 注意! ctx.moveTo (100.5 , 40.5 ) ctx.ストロークスタイル = '#f00' ;
要約すると、既存のパスを閉じて新しいパスを開始しようとしないでください。新しいパスを開始しても、前のパスは閉じられません。