2

パスがキャンバス上で塗りつぶされると、パスの作成方法に応じて、パスの交点が塗りつぶしの色でペイントされるか、空白のままになります。

次に例を示します：http：
//jsfiddle.net/C3Hbb/

//Works as expected:
ctx.beginPath();

ctx.rect(50, 50, 50, 50);
ctx.rect(25, 50, 50, 50);

ctx.fill();

//Transparent on intersection:
ctx.beginPath();

ctx.rect(25, 150, 50, 50);
ctx.rect(100, 150, -50, 50);

ctx.fill();

両方の交差点は、それらを構成する長方形がほぼ同等であるため、同じように描画されると予想しましたが、最初の交差点は塗りつぶしの色でペイントされ、2番目の交差点は透明です。

これらの2つの交差点で動作が異なるのはなぜですか？そして、「透明な」交差動作を回避する方法はありますか？

4

2 に答える 2

2

簡単な答えは次のとおりです。2番目の長方形の幅を負に設定しないでください。あなたのラインがあった場合：

ctx.rect(25, 150, 50, 50);
ctx.rect(50, 150, 50, 50);

また：

ctx.rect(25, 150, 50, 50);
ctx.rect(100, 200, -50, -50);

それはうまく描かれたでしょう。事実上、単一の負の寸法は、標準の時計回りではなく反時計回りにポイントを描画するように指示します。HTML5のcanvas.drawで指定された塗りつぶしの計算では、両方とも単一の負の値のポリゴンをパスの外側として扱います。

HTML5キャンバスフィルの仕様は次のように述べています。

fill（）メソッドは、fillStyleを使用し、オプションのwパラメーターで指定されたfillルールを使用して、目的のパスのすべてのサブパスを埋める必要があります。オプションのwパラメータが指定されていない場合、または文字列「nonzero」の場合、このメソッドは非ゼロのワインディングルールを使用してすべてのサブパスを埋める必要があります。オプションのwパラメータが文字列「evenodd」の場合、このメソッドは、even-oddルールを使用してすべてのサブパスを埋める必要があります。開いているサブパスは、（実際のサブパスに影響を与えることなく）埋められるときに暗黙的に閉じる必要があります。

内側にあるものを決定する定義された「偶数」と「非ゼロ」の両方の手段は、負の番号のものがあなたのパスの外側にあることを示していることに注意してください。

于 2013-03-26T15:41:15.860 に答える
0

これは、2番目の長方形に設定した-50の幅が原因です。Xを調整する必要があります。

ctx.rect(25, 150, 50, 50);
ctx.rect(50, 150, 50, 50);
于 2013-03-26T15:32:55.493 に答える