web-dev-qa-db-ja.com

キャンバスパスとは正確には何ですか？ctx.closePath（）の使用法は何ですか？

私はHTML5ゲームに取り組んでいます。トロンスタイルのゲームであるゲームで、キャンバスにテールラインを描き、交差点を確認する必要があります。

私は実際に JCanvasのdrawLine()関数 を使用していますが、JCanvasは線の交差をチェックする方法を提供しませんでした。ソースを掘り下げて、ctxオブジェクトの使用を見つけました。 、そして使用している関数の最後にオブジェクトを返したので、ctx.isPointInPath()メソッドを使用して必要なことを達成できますが、機能していません。毎回falseを返しています。

パスが何であるかを本当に理解していません-ctx.isPointInPath()の後にctx.moveTo()を使用して設定されたポイントに対してのみctx.beginPath()はtrueを返しますか？または、ctx.moveTo()を使用して接続されている2つの連続するctx.lineTo()の間にあるすべてのポイントに対してtrueを返しますか？

ctx.closePath()の用途は何ですか？

そして、の違いは何ですか：

{
    ctx.closePath();
    ctx.fill();
    ctx.stroke();
}

そして：

{
    ctx.fill();
    ctx.stroke();
    ctx.closePath();
}
javascripthtmlcanvasdrawingjcanvas
25
Aronis Mariano

パスとは何ですか？

これは、ベクトル形状の境界を定義する一連のパスコマンド（moveTo、lineTo、arcToなど）です。その後、必要に応じてパスを塗りつぶしたり、ストロークしたりできます。

closePath()の使用とは何ですか？

デモ： http://jsfiddle.net/YrQCG/5/

_// Draw a red path using closePath() in the middle
ctx.beginPath();
ctx.strokeStyle = 'red';
ctx.moveTo(50,100);
ctx.lineTo(100,150);
ctx.lineTo(150,100);
ctx.closePath();
ctx.lineTo(50,50);
ctx.stroke();

// Slide the next path over by 150 pixels    
ctx.translate(150,0);

// Draw a blue path using the exact same commands, but without closePath
ctx.beginPath();
ctx.strokeStyle = 'blue';
ctx.moveTo(50,100);
ctx.lineTo(100,150);
ctx.lineTo(150,100);
//ctx.closePath();
ctx.lineTo(50,50);
ctx.stroke();
_

 enter image description here

closePath()を使用すると、ペンのポイントが現在のサブパスの開始点に戻り、現在のポイントからその開始点に線を引き戻します;次のコマンドは、この新しいポイントから始まります。最後の線を明示的に描画せずに、完全に輪郭を描かれた形状を描画する場合に便利です。

これは、現在のサブパスの最初のポイントの場所でlineTo()を呼び出し、続いて同じポイントにmoveTo()を呼び出す（新しいサブパスを確立する）ことと同じです。

  • 上記のように、最初のVを使用し、次の2つのmoveToコマンドを使用してlineToシンボルを描画します。赤いパスでclosePathを呼び出すと、水平バーが横に描画され、次の行が左上隅から開始されます。

  • 青いパスでclosePathを呼び出さない場合、次のlineToコマンドは最後に描画されたポイントから続行されます。

closePath()は、ほとんどの場合不要であることに注意してください。これは、新しい描画を開始するたびに呼び出す必要があるbeginPath()とは異なります。道。 （そうでない場合、古いパス描画コマンドはすべて次の描画の一部になります。）

53
Phrogz

これは、閉じたパスの基本的な表現です。

_ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(100,0);
ctx.lineTo(100,100);
ctx.lineTo(0,100);    
ctx.closePath(); // <--the image right side has this line
ctx.stroke();
_

closePath()の結果は、開始点と終了点が制限されることです。

closed path

15
user669677