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. //캔버스 객체 가져오기(캔버스)
15. var canvas = document.getElementById(
"myCanvas"
16. ); //html5를 지원하지 않는 일부 브라우저에서 구문 오류 메시지가 표시되는 것을 방지하기 위해 현재 브라우저가 Canvas 개체를 지원하는지 여부를 간단히 감지합니다.
17. if(canvas.getContext){ 
18. //해당 CanvasRenderingContext2D 객체(브러시) 가져오기
19. var ctx = canvas.getContext("2d"
)
20.   //좌표점(100,10)을 중심으로 반경 50px로 원을 그립니다.
ctx.arc(100, 100, 50, 0, Math.PI * 2,
22. false);  
23. //원 안쪽을 그려서 채워주세요
24. ctx.fill()
25. }
해당 표시 효과는 다음과 같습니다.
이제 ClearRect() 메서드를 사용하여 중심(100,100)을 중심으로 하고 각 변의 크기가 10픽셀인 실선 원의 직사각형 영역을 지웁니다.
JavaScript 코드

클립보드에 콘텐츠 복사

1. <스크립트 유형="텍스트/자바스크립트">
2. //캔버스 객체 가져오기(캔버스)
3. var canvas = document.getElementById("myCanvas");
4. //html5를 지원하지 않는 일부 브라우저에서 구문 오류 메시지가 표시되는 것을 방지하기 위해 현재 브라우저가 Canvas 개체를 지원하는지 여부를 간단히 감지합니다.
5. if(canvas.getContext){ 
6. //해당 CanvasRenderingContext2D 객체(브러시) 가져오기
7. var ctx = canvas.getContext("2d")
 
9. //좌표점(100,10)을 중심으로 반경 50px로 원을 그립니다.
ctx.arc(100, 100, 50, 0, Math.PI * 2,
10. false);  
//원 안쪽을 그려서 채워주세요
12. ctx.fill()
13.  
//직사각형 영역 내의 그래픽 지우기
15. ctx.clearRect(90, 90, 20, 20)
16. }
해당 디스플레이 효과는 다음과 같습니다(약간 구리 동전 같은 느낌인가요?).

페이지에서 페이지의 특정 영역을 지워 배경 이미지를 표시할 수 있습니다. 아래 예에서는 직사각형의 공백을 지우고 페이지 배경을 표시하도록 합니다.

JavaScript 코드

클립보드에 콘텐츠 복사

1.   
2. "zh">   
3. <머리>   
4.     "UTF-8">   
5.        
6.     <스타일>   
7.         본문 { 배경: url("./images/bg2.jpg") 반복; }  
8.         #canvas { 테두리: 1px solid #aaaaaa; 디스플레이: 차단; 여백: 50px 자동; }   
9.        
10.   
11. <본문>   
12. "캔버스 워프">   
13.     <캔버스 ID="캔버스">   
14.         이런 것은 캔버스?！赶快换一个吧！！   
15.        

  

  

<스크립트>   

    window.onload = 함수(){   

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

        canvas.width = 800;   

        canvas.height = 600;   

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

        context.fillStyle = "#FFF";   

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

  

        //清空画布   

        context.clearRect(0,0,canvas.width,canvas.height);   

  

    };