Develop/canvas

33 .clip() - 잘라내기

GuriZzang 2015. 8. 10. 15:35

GuriZzang.com에 오시면 

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


Syntax

ctx.clip();


잘라내기 경로는 캔버스 도형과 비슷하지만, 포토샵의 마스크 등과 같은 의미 입니다. 예를들어 배경 이미지를 별 모양으로 만들고 싶을때 이미지 위에 별모양의 도형을 그린 후 clip()을 사용하면 배경이미지가 별모양 만큼만 보여지는 효과 입니다.





아래의 예제는 간단한 사각형와 원으로 clip() 구현한 예제 입니다.

먼저 원을 그린 후 원을 마스크로 만듭니다.

이후에 그려지는 오브젝트는 원 마스크 영역에서만 보여지게 됩니다.

그럴경우 원을 그리기 전 ctx.save(); 마스크 오브젝트 그리기를 완료한 후 ctx.restore();를 해주시면 됩니다.

하지만... 보기보다 마스크영역의 단면이 지저분 하네요. 뜯긴것처럼..

아마도 포토샵의 안티앨리어싱(Anti-Aliasing)이 적용되지 않고 도트로 표현되어 그런가 봅니다.



Source 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function draw() {
    var ctx = document.getElementById('canvas').getContext('2d');
     
    ctx.save();
    ctx.arc( 70,70,40,0,Math.PI*2,true);
    ctx.clip();     //원을 마스크(clip)로 설정
    ctx.fillRect( 20,20,100,100 );  //사각형을 그림
    ctx.restore();
     
    ctx.fillRect( 150,20,100,100 );
    ctx.beginPath();
    ctx.arc( 300,70,40,0,Math.PI*2,true);
    ctx.stroke();
     
}



Demo









Source 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
function draw() {
    var ctx = document.getElementById('canvas').getContext('2d');
    ctx.fillRect(0,0,150,150);
    ctx.translate(75,75);
     
    // 동그란 모양의 잘라내기 경로를 생성한다
    ctx.beginPath();
    ctx.arc(0,0,60,0,Math.PI*2,true);
    ctx.clip();
     
    // 배경을 그린다
    var lingrad = ctx.createLinearGradient(0,-75,0,75);
    lingrad.addColorStop(0, '#232256');
    lingrad.addColorStop(1, '#143778');
     
    ctx.fillStyle = lingrad;
    ctx.fillRect(-75,-75,150,150);
     
    // 별을 그린다
    for (var j=1;j<50;j++){
        ctx.save();
        ctx.fillStyle = '#fff';
        ctx.translate(75-Math.floor(Math.random()*150),
        75-Math.floor(Math.random()*150));
        drawStar(ctx,Math.floor(Math.random()*4)+2);
        ctx.restore();
    }
}
     
function drawStar(ctx,r){
    ctx.save();
    ctx.beginPath()
    ctx.moveTo(r,0);
    for (var i=0;i<9;i++){
        ctx.rotate(Math.PI/5);
        if(i%2 == 0) {
            ctx.lineTo((r/0.525731)*0.200811,0);
        } else {
            ctx.lineTo(r,0);
        }
    }
    ctx.closePath();
    ctx.fill();
    ctx.restore();
}



Demo



33 clip()을 끝으로 드디어 MDN에 나와있는 기본 튜토리얼이 끝났네요.

앞으로는 MDN에 나와있는 간단한 기본 에니메이션 데모를 시작으로 간단한 캐릭터 그리기, 캐릭터로 간단한 게임 만들기 등을 해봐야 겠습니다.