25

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

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

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

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

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

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

と：

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

2 に答える 2

53

パスとは

ベクトル形状の境界を定義する一連のパス コマンド (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();

                                          ここに画像の説明を入力

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

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

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

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

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

于 2012-05-29T22:22:06.930 に答える
17

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

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()、開始点と終了点が制限されます。

閉ざされた道

于 2013-04-19T12:33:39.187 に答える