HTML 캔버스 clip() 메서드
예시
캔버스에서 200*120픽셀의 직사각형 영역을 잘라냅니다. 그런 다음 빨간색 사각형을 그립니다. 잘린 영역 안에 있는 빨간색 직사각형 부분만 볼 수 있습니다.
자바스크립트:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Clip a rectangular area
ctx.rect(50, 20, 200, 120);
ctx.stroke();
ctx.clip();
// Draw red rectangle after clip()
ctx.fillStyle = "red";
ctx.fillRect(0, 0, 150, 100);
</script>
브라우저 지원
표의 숫자는 이 방법을 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다.
| Method | |||||
|---|---|---|---|---|---|
| clip() | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
정의 및 사용
clip() 메서드는 원본 캔버스에서 모든 모양과 크기의 영역을 자릅니다.
팁: 영역이 잘리면 이후의 모든 그림은 잘린 영역으로 제한됩니다(캔버스의 다른 영역에 액세스할 수 없음). 그러나 clip() 메서드를 사용하기 전에 save() 메서드를 사용하여 현재 캔버스 영역을 저장하고 나중에 언제든지 복원(restore() 메서드를 사용)할 수 있습니다.
| 자바스크립트 구문: | 컨텍스트 .clip(); |
|---|
❮ 캔버스 개체