Canvas 클리핑
Canvas의 clip() 메서드를 사용하면 그리기 영역을 특정 모양으로 제한할 수 있다. 클리핑 영역 밖의 부분은 보이지 않게 된다.
clip() 메서드 기본 사용법
clip() 메서드는 현재 경로를 클리핑 영역으로 설정한다. 이후에 그려지는 모든 것은 클리핑 영역 내부에서만 표시된다.
<canvas id="myCanvas1" width="300" height="150" style="border:1px solid #d3d3d3;">
브라우저가 HTML5 Canvas를 지원하지 않습니다.
</canvas>
<script>
var c = document.getElementById("myCanvas1");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(150, 75, 50, 0, 2 * Math.PI);
ctx.clip();
ctx.fillStyle = "red";
ctx.fillRect(0, 0, 300, 150);
</script>이 예제에서는 원형 경로를 만들고 clip()을 호출하여 클리핑 영역을 설정한다. 그 다음 전체 캔버스를 빨간색으로 채우지만 원형 클리핑 영역 내부만 보이게 된다.
사각형 클리핑
사각형 모양의 클리핑 영역을 만들 수 있다.
<canvas id="myCanvas2" width="300" height="150" style="border:1px solid #d3d3d3;">
브라우저가 HTML5 Canvas를 지원하지 않습니다.
</canvas>
<script>
var c = document.getElementById("myCanvas2");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.rect(50, 25, 200, 100);
ctx.clip();
ctx.fillStyle = "blue";
ctx.fillRect(0, 0, 300, 150);
ctx.fillStyle = "yellow";
ctx.beginPath();
ctx.arc(150, 75, 60, 0, 2 * Math.PI);
ctx.fill();
</script>이 예제는 사각형 클리핑 영역을 설정한 후 파란색 배경과 노란색 원을 그린다. 클리핑 영역 밖의 부분은 표시되지 않는다.
복잡한 경로 클리핑
복잡한 경로를 사용하여 독특한 모양의 클리핑 영역을 만들 수 있다.
<canvas id="myCanvas3" width="300" height="150" style="border:1px solid #d3d3d3;">
브라우저가 HTML5 Canvas를 지원하지 않습니다.
</canvas>
<script>
var c = document.getElementById("myCanvas3");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.moveTo(150, 20);
ctx.lineTo(200, 80);
ctx.lineTo(100, 80);
ctx.closePath();
ctx.clip();
ctx.fillStyle = "green";
ctx.fillRect(0, 0, 300, 150);
ctx.fillStyle = "red";
ctx.beginPath();
ctx.arc(150, 75, 40, 0, 2 * Math.PI);
ctx.fill();
</script>이 예제는 삼각형 경로를 만들어 클리핑 영역으로 설정한다. 녹색 배경과 빨간색 원이 삼각형 영역 내부에서만 보인다.
save()와 restore()를 사용한 클리핑
클리핑 영역을 일시적으로 적용하고 나중에 원래 상태로 복원할 수 있다.
<canvas id="myCanvas4" width="300" height="150" style="border:1px solid #d3d3d3;">
브라우저가 HTML5 Canvas를 지원하지 않습니다.
</canvas>
<script>
var c = document.getElementById("myCanvas4");
var ctx = c.getContext("2d");
ctx.fillStyle = "yellow";
ctx.fillRect(0, 0, 300, 150);
ctx.save();
ctx.beginPath();
ctx.arc(100, 75, 50, 0, 2 * Math.PI);
ctx.clip();
ctx.fillStyle = "red";
ctx.fillRect(0, 0, 200, 150);
ctx.restore();
ctx.fillStyle = "blue";
ctx.fillRect(150, 50, 100, 50);
</script>이 예제에서는 save()로 상태를 저장한 후 원형 클리핑을 적용하여 빨간색 사각형을 그린다. 그 다음 restore()로 클리핑을 해제하고 파란색 사각형을 그린다.
여러 클리핑 영역 조합
여러 클리핑 영역을 조합하여 복잡한 효과를 만들 수 있다.
<canvas id="myCanvas5" width="300" height="150" style="border:1px solid #d3d3d3;">
브라우저가 HTML5 Canvas를 지원하지 않습니다.
</canvas>
<script>
var c = document.getElementById("myCanvas5");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.rect(50, 25, 200, 100);
ctx.clip();
ctx.beginPath();
ctx.arc(150, 75, 40, 0, 2 * Math.PI);
ctx.clip();
ctx.fillStyle = "purple";
ctx.fillRect(0, 0, 300, 150);
</script>이 예제는 사각형 클리핑 영역을 설정한 후 그 안에 원형 클리핑 영역을 추가로 설정한다. 결과적으로 두 영역이 겹치는 부분만 보이게 된다.
이미지와 클리핑
클리핑을 사용하여 이미지의 특정 부분만 표시할 수 있다.
<canvas id="myCanvas6" width="300" height="150" style="border:1px solid #d3d3d3;">
브라우저가 HTML5 Canvas를 지원하지 않습니다.
</canvas>
<script>
var c = document.getElementById("myCanvas6");
var ctx = c.getContext("2d");
var img = new Image();
img.onload = function() {
ctx.beginPath();
ctx.arc(150, 75, 60, 0, 2 * Math.PI);
ctx.clip();
ctx.drawImage(img, 0, 0, 300, 150);
};
img.src = "landscape.jpg";
</script>이 예제는 원형 클리핑 영역을 설정한 후 이미지를 그린다. 이미지는 원형 영역 내부에서만 보이게 된다.
텍스트와 클리핑
텍스트 경로를 클리핑 영역으로 사용할 수 있다.
<canvas id="myCanvas7" width="300" height="150" style="border:1px solid #d3d3d3;">
브라우저가 HTML5 Canvas를 지원하지 않습니다.
</canvas>
<script>
var c = document.getElementById("myCanvas7");
var ctx = c.getContext("2d");
ctx.font = "60px Arial";
ctx.strokeText("CLIP", 50, 90);
ctx.font = "60px Arial";
ctx.beginPath();
ctx.textPath = function(text, x, y) {
ctx.fillText(text, x, y);
};
ctx.clip();
var gradient = ctx.createLinearGradient(0, 0, 300, 0);
gradient.addColorStop(0, "red");
gradient.addColorStop(0.5, "yellow");
gradient.addColorStop(1, "blue");
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, 300, 150);
</script>이 예제는 텍스트 모양의 클리핑 영역을 만들려고 시도한다. 텍스트 경로 클리핑은 브라우저 지원에 따라 다를 수 있다.
애니메이션과 클리핑
클리핑 영역을 애니메이션으로 변경하여 동적인 효과를 만들 수 있다.
<canvas id="myCanvas8" width="300" height="150" style="border:1px solid #d3d3d3;">
브라우저가 HTML5 Canvas를 지원하지 않습니다.
</canvas>
<script>
var c = document.getElementById("myCanvas8");
var ctx = c.getContext("2d");
var radius = 10;
var growing = true;
function draw() {
ctx.clearRect(0, 0, c.width, c.height);
ctx.save();
ctx.beginPath();
ctx.arc(150, 75, radius, 0, 2 * Math.PI);
ctx.clip();
ctx.fillStyle = "red";
ctx.fillRect(0, 0, 300, 150);
ctx.fillStyle = "blue";
ctx.beginPath();
ctx.arc(100, 50, 30, 0, 2 * Math.PI);
ctx.fill();
ctx.fillStyle = "green";
ctx.beginPath();
ctx.arc(200, 100, 25, 0, 2 * Math.PI);
ctx.fill();
ctx.restore();
if (growing) {
radius += 1;
if (radius > 80) growing = false;
} else {
radius -= 1;
if (radius < 10) growing = true;
}
requestAnimationFrame(draw);
}
draw();
</script>[/code]
이 예제는 원형 클리핑 영역의 크기가 변하는 애니메이션을 보여준다. 클리핑 영역이 커지고 작아지면서 배경의 도형들이 점진적으로 나타나고 사라진다.
마스크 효과 만들기
클리핑을 사용하여 이미지에 마스크 효과를 적용할 수 있다.
[code lang="markup"]<canvas id="myCanvas9" width="300" height="150" style="border:1px solid #d3d3d3;">
브라우저가 HTML5 Canvas를 지원하지 않습니다.
</canvas>
<script>
var c = document.getElementById("myCanvas9");
var ctx = c.getContext("2d");
ctx.save();
ctx.beginPath();
ctx.arc(80, 75, 50, 0, 2 * Math.PI);
ctx.arc(220, 75, 50, 0, 2 * Math.PI);
ctx.clip();
ctx.fillStyle = "orange";
ctx.fillRect(0, 0, 300, 150);
ctx.restore();
ctx.fillStyle = "black";
ctx.font = "20px Arial";
ctx.fillText("클리핑 영역 밖", 110, 30);
</script>이 예제는 두 개의 원형 클리핑 영역을 만들어 마스크 효과를 보여준다. 오렌지색 배경은 두 원 내부에서만 보이고, 텍스트는 클리핑 영역 밖에 그려진다.
💡 Canvas 클리핑 팁:
• 클리핑 영역은 누적되므로 save()와 restore()를 사용하여 관리하자
• 복잡한 클리핑 영역을 만들 때는 경로를 정확히 설정해야 한다
• 클리핑은 성능에 영향을 줄 수 있으므로 필요한 경우에만 사용하자
Canvas 클리핑 기능을 활용하면 이미지 편집, 특수 효과, 복잡한 그래픽 디자인 등 다양한 용도로 사용할 수 있다. 클리핑과 다른 Canvas 기능을 조합하면 더욱 창의적인 시각적 효과를 만들 수 있다.
