1

以下が正方形が互いに重なる白いフィールドを生成するのはなぜだろうと思っていました:

http://jsfiddle.net/yNTTj/5/

// square 1
ctx.moveTo(  0,   0); // left top
ctx.lineTo(200,   0); // right top
ctx.lineTo(200, 200); // right bottom
ctx.lineTo(  0, 200); // left bottom
ctx.lineTo(  0,   0); // left top

// square 2
ctx.moveTo(100, 100); // left top
ctx.lineTo(100, 300); // left bottom
ctx.lineTo(300, 300); // right bottom
ctx.lineTo(300, 100); // right top
ctx.lineTo(100, 100); // left top

ctx.fill();

したがって、最初の正方形は時計回りに定義されたパスで描画されますが、2 番目の正方形は反時計回りに定義されたパスで描画されます。

正方形 2 の次数を同じ方法で定義するとどうなるかのように、両方が黒く着色されると思います: http://jsfiddle.net/yNTTj/6/。しかし、見かけ上、重なり合うスペースは白（一般的に言えば、背景色）になります。

逆にパスを定義すると、基本的に同じ領域が切り捨てられるのに、塗りつぶすときに異なる結果が得られるのはなぜですか?

4

1 に答える 1

2

このタイプの充填動作は、「非ゼロ ワインディング ルール」として知られています。ウィキペディアにそのページがあります。

仕様では、その動作が定義されています。仕様のこのページで「巻く」を検索してください。

于 2011-05-28T20:42:33.563 に答える