Nonzero Winding Rule

넌제로 와인딩 규칙(Nonzero Winding Rule)은 선분이 반시계방향으로 그 점(이하에서는 점D)을 몇 번이나 감싸는지 확인해서 점D의 내부 또는 외부를 판정하는 방법이다.

방법 : 0부터 시작해서, 점D를 기준으로 점D를 지나는 선분을 그었을 때 점D를 제외하고 점D를 지나는 선분과 다른 선분이 만났을 때 그 다른 선분이 우에서 좌의 방향을 가지는 벡터면 +1, 좌에서 우면 -1을 더한다. 이렇게 계산한 값이 0이면 외부점, 0이 아니면 내부점이다.

Html5 canvas에서의 Nonzero Winding Rule

ex) ctx.arc(10,10,10,0,2*Math.PI,true);

ctx.arc(10,10,5,0,2*Math.PI,false);

ctx.fillStyle = "#f0f";

ctx.fill();

위의 예제와 같은 경우라면 반지름이 10px인 도형은 분홍색으로 색상이 입혀지지만, 반지름이 5인 원은 색상이 입혀지지 않는다.

canvas 태그의 사용자함수 또는 네이티브 함수로 원이든 다각형이든 어떤 방향이 있는 것을 그렸을 때, 방향이 다른 두 개의 도형이 그려지는 경우 넌제로 와인딩 규칙을 사용해서 어떤 점D1이 경로에 포함되어 있는 지를 계산해서 색상이 알맞게 입혀진다.