HTML5 Canvas API_html5 튜토리얼 팁의clearRect() 메소드를 사용하여 지우개 기능 구현

실제로 우리는 브러시를 사용하여 드로잉 보드에 그림을 그립니다. html5 캔버스에서는 캔버스의 브러시(CanvasRenderingContext2D 개체)를 사용하여 캔버스에 그릴 수도 있습니다. 우리 모두 알고 있듯이, 우리의 브러시는 일반적으로 페인팅 과정 중 실수를 수정하고 다시 칠하기 위해 지우개와 함께 사용됩니다. html5 캔버스에서 CanvasRenderingContext2D 객체는 영원히 재사용할 수 있는 지우개, 즉clearRect() 메서드도 제공합니다.

XML/HTML 코드클립보드에 콘텐츠 복사

1. clearRect(x, y, 너비, 높이)

CanvasRenderingContext2D 객체의 clearRect() 메서드는 지정된 좌표점(x, y)을 왼쪽 위 모서리로, 너비를 너비로, 높이를 사용하여 캔버스의 직사각형 영역에 있는 모든 그래픽 픽셀을 지우는 데 사용됩니다. 높이로.

이제 실제 사례를 살펴보겠습니다. 먼저 반경이 50px인 단단한 원을 그린 다음 지우개clearRect()를 사용하여 그 안의 로컬 영역을 지웁니다. 원을 그리는 원본 html5 코드는 다음과 같습니다.

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

4. "UTF-8">
"myCanvas"
10. width="400px" height="300px" style="테두리: 1px 단색 빨간색;"> 귀하의 브라우저가 캔버스 태그를 지원하지 않습니다.
캔버스>
"텍스트/자바스크립트">
13. //캔버스 객체 가져오기(캔버스)
14. var canvas = document.getElementById(
"myCanvas"
15. ); //html5를 지원하지 않는 일부 브라우저에서 구문 오류 메시지가 표시되는 것을 방지하기 위해 현재 브라우저가 Canvas 개체를 지원하는지 여부를 간단히 감지합니다.
16. if(canvas.getContext){ 
17. //해당 CanvasRenderingContext2D 객체(브러시) 가져오기
18. var ctx = canvas.getContext("2d"
)
19.   //좌표점(100,10)을 중심으로 반경 50px로 원을 그립니다.
ctx.arc(100, 100, 50, 0, Math.PI * 2,
21. false);  
22. //원 안쪽을 그려서 채워주세요
23. ctx.fill()
24. }