33 .clip() - 잘라내기

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