HTML5 Canvas API_html5 튜토리얼 팁에서 클립() 메소드를 사용하여 이미지 자르기 영역

캔버스를 사용하여 이미지를 그릴 때 이미지의 일부만 유지하려는 경우가 종종 있습니다. 이러한 아이디어를 얻기 위해 캔버스 API의 이미지 자르기 기능을 사용할 수 있습니다.
Canvas API의 이미지 자르기 기능은 캔버스 내의 경로를 사용하면 경로에 포함된 영역의 이미지만 그려지고 경로 외부의 이미지는 그려지지 않는다는 의미입니다. 이는 Flash의 레이어 마스크와 약간 비슷합니다.

캔버스의 이미지 자르기 기능을 구현하려면 그래픽 컨텍스트의 매개변수 없이 클립() 메서드를 사용하세요. 이 메서드는 경로를 사용하여 캔버스의 클리핑 영역을 설정합니다. 따라서 경로를 먼저 생성해야 합니다. 생성이 완료되면 Clip() 메서드를 호출하여 자르기 영역을 설정합니다.
잘라낸 캔버스는 원래 크기로 복원할 수 없습니다. 즉, 원래 정의된 크기를 유지하기 위해 캔버스가 작아집니다. 결국 캔버스에 의해 그리기는 save() 및 Restore()에 주의해야 합니다. 그리기 전에 캔버스를 먼저 자릅니다. 사진이 아니어도 경로를 넣어도 됩니다~

먼저 간단한 데모를 살펴보겠습니다.

JavaScript 코드클립보드에 콘텐츠 복사

1.   
2. "zh">   
3.   
4.     "UTF-8">   
5.        
6.        
7.   
8.   
9. "canvas-warp">   
10.     "canvas">   
11.         你的浏览器居然不支持Canvas？！赶快换一个吧！！   
12.        

<스크립트>

window.onload = 함수(){

var canvas = document.getElementById("canvas");

canvas.width = 800

캔버스.높이 = 600

var context = canvas.getContext("2d"); context.fillStyle =

"#FFF"

context.fillRect(0,0,800,600)

//화면에 큰 사각형을 그립니다

context.fillStyle =

"검정색"

context.fillRect(10,10,200,200)

context.save()

context.beginPath()

//캔버스를 (0, 0) 점에서 (50, 50)의 제곱으로 자릅니다

context.ect(0,0,50,50)

context.clip()

//빨간색 원

context.beginPath()

context.StrokeStyle =

"빨간색"

context.lineWidth = 5

context.arc(100,100,100,0,Math.PI * 2,

false

)

//완전한 원

context.Stroke()

context.closePath()

context.restore()

//캔버스 전체를 다시 자릅니다

context.beginPath()

context.ect(0,0,500,500)

context.clip()

//자르지 않은 파란색 선을 그립니다

context.beginPath()

context.StrokeStyle =

"파란색"

context.lineWidth = 5

context.arc(100,100,50,0,Math.PI * 2,false)

//완전한 원

context.Stroke()

context.closePath()

};

실행 결과:

save() 및 Restore() 메소드를 혼합하여 사용하면 그리기 영역을 제한할 수 있습니다. 먼저, ect() 메서드를 사용하여 그리려는 영역을 둘러싼 다음,clip() 메서드를 사용하여 해당 영역을 자릅니다.

이렇게 하면 컨텍스트에서 어떤 작업을 수행하더라도 제한된 부분만 표시됩니다. 즉, 클립()의 기능은 표시할 영역을 제한하는 것입니다. 더 이상 영역을 제한하고 싶지 않으면 복원() 메서드를 사용하여 원래 컨텍스트에서 벗어나 계속 작업할 수 있습니다.
이 자르기를 다시 보세요:

JavaScript 코드클립보드에 콘텐츠 복사

1. 함수 drawScreen() {
2. var x = canvas.width / 2
3. var y = canvas.height / 2
4. var 반경 = 75
5. var 오프셋 = 50
7. //잘라낸 영역은 (x, y)이며 중심 반경이 75인 원입니다.
8. context.save()
9. context.beginPath()
10. context.arc(x, y, radius, 0, 2 * Math.PI, false);
context.clip()
 
13. // 먼저 파란색 호를 그리면 자르기를 초과하는 부분은 표시되지 않습니다
context.beginPath()
context.arc(x - 오프셋, y - 오프셋, 반경, 0, 2 * Math.PI,
15. false); context.fillStyle =
'파란색'
16. context.fill()
18.  
//노란색 호를 그리면 크롭을 벗어난 부분은 표시되지 않습니다.
19. context.beginPath()
20. context.arc(x offset, y, radius, 0, 2 * Math.PI,
false
21. ); context.fillStyle = '노란색'
22. context.fill()
 
24. // 빨간색 원호를 그리면 크롭을 벗어난 부분은 표시되지 않습니다
25. context.beginPath()
context.arc(x, y offset, radius, 0, 2 * Math.PI,
26. false
)
27. context.fillStyle = '빨간색'
28. context.fill()
 
30. /*
31. * Restore() 메서드는 컨텍스트의 원래 상태(이 경우에는 clips() 이전 상태)로 돌아갑니다.
32. * context.beginPath() 메서드를 제거하고 어떻게 되는지 시도해 볼 수 있습니다.
33. */
34. context.restore()
35. context.beginPath()
36. context.arc(x, y, radius, 0, 2 * Math.PI, false);
context.lineWidth = 10
context.StrokeStyle =
38. '파란색'
context.Stroke()
}

크롭 기능의 일반적인 호출 형태는

임을 다시 한번 강조드립니다.
save();

clip();

restore();
가 이 순서대로 호출됩니다.