20. nonzero - 필터규칙

GuriZzang.com에 오시면 

더 자세한 내용을 보실 수 있습니다.

채우기( fill() )등을 사용하는 경우 두가지의 내부 알고리즘을 이용할 수 있습니다.

"nonzero": The non-zero winding rule, which is the default rule.

"evenodd": The even-odd winding rule.

ctx.fill()의 경우 기본값인 ctx.fill('nonzero')와 동일 합니다.

아래의 샘플을 보시면 왼쪽은 evenodd로 채우기, 투명, 채우기, 투명이 적용되었으나 오른쪽은 기본설정인 nonzero가 적용되어 전체 색상이 칠해진 것을 확인할 수 있습니다.

Source 

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

function draw() {     var ctx = document.getElementById('canvas').getContext('2d');     ctx.beginPath();     ctx.arc(50, 50, 30, 0, Math.PI*2, true);     ctx.arc(60, 50, 25, 0, Math.PI*2, true);     ctx.arc(70, 50, 20, 0, Math.PI*2, true);     ctx.arc(80, 50, 15, 0, Math.PI*2, true);     ctx.fill('evenodd');           ctx.beginPath();     ctx.arc(150, 50, 30, 0, Math.PI*2, true);     ctx.arc(160, 50, 25, 0, Math.PI*2, true);     ctx.arc(170, 50, 20, 0, Math.PI*2, true);     ctx.arc(180, 50, 15, 0, Math.PI*2, true);     ctx.fill('nonzero');        //ctx.fill(); 과 동일 기본값임.           ctx.beginPath();     ctx.arc(250, 50, 30, 0, Math.PI*2, true);     ctx.arc(250, 50, 25, 0, Math.PI*2, true);     ctx.arc(250, 50, 20, 0, Math.PI*2, true);     ctx.arc(250, 50, 15, 0, Math.PI*2, true);     ctx.fill('evenodd'); }

Demo