티스토리 뷰

Develop/canvas

20. nonzero - 필터규칙

GuriZzang 2015. 8. 10. 15:28

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

댓글
댓글쓰기 폼