html5-canvas
화면 지우기

통사론

• 무효 clearRect (x, y, 폭, 높이)
• ImageData createImageData (폭, 높이)

비고

직사각형

clearRect 메서드를 사용하여 캔바스의 사각형 섹션을 지울 수 있습니다.

// Clear the entire canvas
ctx.clearRect(0, 0, canvas.width, canvas.height);

주 : clearRect 는 변환 행렬에 따라 다릅니다.

이를 처리하기 위해 캔버스를 지우기 전에 변환 행렬을 재설정 할 수 있습니다.

ctx.save();                                       // Save the current context state
ctx.setTransform(1, 0, 0, 1, 0, 0);               // Reset the transformation matrix
ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear the canvas
ctx.restore();                                    // Revert context state including 
                                                  // transformation matrix

참고 : ctx.save 및 ctx.restore 는 캔버스 2D 컨텍스트 상태를 유지하려는 경우에만 ctx.restore . 일부 상황에서는 저장 및 복원이 느려질 수 있으며 일반적으로 필요하지 않은 경우 피해야합니다.

원시 이미지 데이터

putImageData 사용해 렌더링 된 이미지 데이터에 직접 쓸 수 있습니다. 새 이미지 데이터를 만들어 캔버스에 할당하면 전체 화면이 지워집니다.

var imageData = ctx.createImageData(canvas.width, canvas.height);
ctx.putImageData(imageData, 0, 0);

주 : putImageData 는 컨텍스트에 적용된 변환의 영향을받지 않습니다. 렌더링 된 픽셀 영역에 직접 데이터를 씁니다.

복잡한 도형

globalCompositeOperation 속성을 변경하여 복잡한 모양의 영역을 지울 수 있습니다.

// All pixels being drawn will be transparent
ctx.globalCompositeOperation = 'destination-out';

// Clear a triangular section
ctx.globalAlpha = 1;    // ensure alpha is 1
ctx.fillStyle = '#000'; // ensure the current fillStyle does not have any transparency
ctx.beginPath();
ctx.moveTo(10, 0);
ctx.lineTo(0, 10);
ctx.lineTo(20, 10);
ctx.fill();

// Begin drawing normally again
ctx.globalCompositeOperation = 'source-over';

그라디언트가있는 캔버스를 지 웁니다.

모든 픽셀을 투명하게 만드는 clearRect 를 사용하는 대신 배경을 원할 수 있습니다.

그래디언트로 지우려면

// create the background gradient once
var bgGrad = ctx.createLinearGradient(0,0,0,canvas.height);
bgGrad.addColorStop(0,"#0FF");
bgGrad.addColorStop(1,"#08F");

// Every time you need to clear the canvas
ctx.fillStyle = bgGrad;
ctx.fillRect(0,0,canvas.width,canvas.height);

이 약 절반 빠른 0.008ms 의 clearRect의 같은 0.004ms 그러나 두 번째의 4millions 부정적인 어떤 실시간 애니메이션에 영향을주지해야한다. 시간은 장치, 해상도, 브라우저 및 브라우저 구성에 따라 상당히 달라질 수 있습니다.

복합 작업을 사용하여 캔버스 지우기

합성 작업을 사용하여 캔버스를 지 웁니다. 이것은 변환과는 별도로 캔버스를 지우지 만 clearRect() 만큼 빠르지는 않습니다.

ctx.globalCompositeOperation = 'copy';

다음에 그려진 내용은 이전 내용을 지 웁니다.