HTML 캔버스의 clearRect() 메서드는 주어진 사각형의 픽셀을 지우는 데 사용됩니다.
다음은 구문입니다 -
ctx.clearRect(p,q,width,height);
위,
- p :지울 사각형의 왼쪽 상단 모서리의 x 좌표
- q: 지울 사각형의 왼쪽 상단 모서리의 y 좌표
- 너비 :지울 사각형의 너비
- 높이 :지울 사각형의 높이
이제 캔버스의 clearRect() 메서드를 구현하는 예를 살펴보겠습니다.
예시
<!DOCTYPE html> <html> <body> <canvas id="newCanvas" width="500" height="350" style="border:2px solid blue;"> </canvas> <script> var c = document.getElementById("newCanvas"); var ctx = c.getContext("2d"); ctx.fillStyle = "gray"; ctx.fillRect(0, 0, 500, 350); ctx.clearRect(250, 100, 50, 100); </script> </body> </html>
출력