수색…
통사론
- 무효 clearRect (x, y, 폭, 높이)
- ImageData createImageData (폭, 높이)
비고
alpha: false
매개 변수를 사용하여 컨텍스트를 만든 경우 이러한 메서드 중 아무 것도 투명한 픽셀을 생성하지 않습니다.
직사각형
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';
다음에 그려진 내용은 이전 내용을 지 웁니다.