실제로 우리는 브러시를 사용하여 드로잉 보드에 그림을 그립니다. html5 캔버스에서는 캔버스의 브러시(CanvasRenderingContext2D 개체)를 사용하여 캔버스에 그릴 수도 있습니다. 우리 모두 알고 있듯이, 우리의 브러시는 일반적으로 페인팅 과정 중 실수를 수정하고 다시 칠하기 위해 지우개와 함께 사용됩니다. html5 캔버스에서 CanvasRenderingContext2D 객체는 영원히 재사용할 수 있는 지우개, 즉clearRect() 메서드도 제공합니다.
CanvasRenderingContext2D 객체의 clearRect() 메서드는 지정된 좌표점(x, y)을 왼쪽 위 모서리로, 너비를 너비로, 높이를 사용하여 캔버스의 직사각형 영역에 있는 모든 그래픽 픽셀을 지우는 데 사용됩니다. 높이로.
이제 실제 사례를 살펴보겠습니다. 먼저 반경이 50px인 단단한 원을 그린 다음 지우개clearRect()를 사용하여 그 안의 로컬 영역을 지웁니다. 원을 그리는 원본 html5 코드는 다음과 같습니다.
JavaScript 코드클립보드에 콘텐츠 복사
-
-
-
- "UTF-8">
HTML5clearRect()를 사용하여 지정된 직사각형 영역을 지우는 시작하기 -
-
-
-
-
"myCanvas"- width="400px" height="300px" style="테두리: 1px 단색 빨간색;">
귀하의 브라우저가 캔버스 태그를 지원하지 않습니다.
-
-
<스크립트 유형=- "텍스트/자바스크립트"
>
-
//캔버스 객체 가져오기(캔버스)
-
canvas = document.getElementById(
"myCanvas"-
);
//html5를 지원하지 않는 일부 브라우저에서 구문 오류 메시지가 표시되는 것을 방지하기 위해 현재 브라우저가 Canvas 개체를 지원하는지 여부를 간단히 감지합니다.
-
if
-
//해당 CanvasRenderingContext2D 객체(브러시) 가져오기
-
var"2d"
) -
//좌표점(100,10)을 중심으로 반경 50px로 원을 그립니다.
-
ctx.arc(100, 100, 50, 0, Math.PI * 2, -
false
-
//원 안쪽을 그려서 채워주세요
-
ctx.fill()
-
}
-
-
