Canvas における beginPath() と closePath() の役割の分析例

この記事では、canvas の beginPath() と closePath() の関数の分析例を紹介します。必要な方は参考にしていただければ幸いです。

beginPath の関数は非常に単純で、新しいパスを開始することですが、キャンバス描画を使用するプロセスでは非常に重要です

最初に小さなコードを見てみましょう。

var ctx=document.getElementById("canvas").getContext("2d");
    ctx.beginPath();
    ctx.rect(150,150,100,100);
    ctx.fillStyle="green";
    ctx.fill();
    ctx.rect(0,0,100,100);
    ctx.fillStyle="yellow";
    ctx.fill();

コードにはエラーはありませんが、緑色と黄色が 1 つずつではなく、一辺の長さが 100 ピクセルの黄色の正方形が 2 つ表示されます。これはなぜでしょうか。

実際、キャンバス内の描画メソッド (fill、stoke) は、最後の "beginPath" の後にすべてのパスを描画します。最初の長方形は 2 回塗りつぶされ、1 回目は緑、2 回目は黄色です。 2 回目では、2 つの黄色の長方形が得られました。これは、beginPath がない限り、どこに移動しても、線分や他の曲線、グラフィックスを描画する場合に当てはまります。

描画したグラフィックスが想像したものと一致しない場合は、必ず beginPath を確認してください。

beginPath について話すときは、closePath について言及する必要があります。実際には、この 2 つは関係ありません。 closePath は、パスの終点ではなく、新しいパスを開始するのではなく、パスの終点を始点に接続することを意味します。

上記のコードの最初の入力の後に closePath を追加しますが、それでも 2 つの黄色の四角形が表示されます。

しかし、後で beginPath を追加すると、異なる色の 2 つの長方形が得られます。

つまり、パスを閉じて新しいパスを開始しようとしないでください。パスを閉じないと、新しいパスを開始したとしても、パスは閉じられません。

以上がCanvas における beginPath() と closePath() の役割の分析例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。