HTML5 Canvas 화면 지우기

HTML5 Canvas clearRect() 사용 방법2D上下문서 함수 clearRect()는 화면의 사각형을 지우는 데 사용됩니다. 지워진 사각형은 투명이 됩니다.

온라인 예제

2D上下문서 함수 clearRect()는 화면의 사각형을 지우는 데 사용됩니다. 지워진 사각형은 투명이 됩니다. 이는 코드 예제입니다:

<canvas id="ex1" width="500" height="150" style="border:　1px solid #cccccc;">　　　　
HTML5　Canvas를 지원하지 않습니다　　　　
</canvas>　　　　
<script>　　　　
var canvas = document.getElementById("ex1");　　　　
var context = canvas.getContext("2d");　　　　
context.fillStyle = "#ff0000";　　　　
context.fillRect(10,10,　100,100);　　　　
context.strokeStyle = "#0000ff";　　　　
context.strokeRect(30,20,　120,　110);　　　　
context.clearRect(50,　30,　110,　35);　　　　　　　　　
</script>

주의해야 할 것은, 현재 빨간색과 파란색 사각형 안에 있는 사각형을 지우는 방법입니다.
이전에 설명한 것처럼, clearRect()를 사용하여 지우면 해당 영역이 투명이 됩니다. 만약 canvas 요소가 다른 요소의 위에 배치되어 있다면, 그 요소의 내용은 지우는 영역을 통해 보이게 됩니다.

clearRect(x, y, width, height)

사각형을 그리는 것처럼, clearRect(x, y, width, height)에 전달된 값4clearRect() 함수는 지우려는 사각형의 왼쪽 상단 위치와 지우려는 사각형의 너비와 높이를 나타냅니다.
이는 더 명확한 예제입니다:

var　x　=　50;
var　y　=　30;
var　width　=　110;
var　height　=　25;
context.clearRect(x,　y,　width,　height);