javascript - 지우기 - 캔버스 프로그램




다시 그리기를 위해 캔버스를 지우는 법 (14)

복합 작업을 실험하고 캔버스에 이미지를 그린 후에는 이제 이미지와 합성을 제거하려고합니다. 어떻게해야합니까?

다른 이미지를 다시 그릴 때 캔버스를 지워야합니다. 이것은 잠시 동안 계속 될 수 있으므로 매번 새로운 사각형을 그리는 것이 가장 효율적인 옵션이라고 생각하지 않습니다.


사용 : context.clearRect(0, 0, canvas.width, canvas.height);

이것은 전체 캔버스를 지우는 가장 빠르고 가장 설명적인 방법입니다.

사용하지 마십시오 : canvas.width = canvas.width;

canvas.width 재설정하면 모든 캔버스 상태 (예 : 변형, lineWidth, strokeStyle 등)가 재설정 canvas.width (clearRect에 비해) 매우 느리고 모든 브라우저에서 작동하지 않으며 실제로 시도한 내용을 설명하지 않습니다. 할 것.

변환 된 좌표 다루기

변환 행렬을 수정 한 경우 (예 : scale , rotate 또는 translate ) context.clearRect(0,0,canvas.width,canvas.height) 는 캔버스의 전체 보이는 부분을 지우지 않을 것입니다.

해결책? 캔버스를 지우기 전에 변환 행렬을 재설정하십시오.

// Store the current transformation matrix
context.save();

// Use the identity matrix while clearing the canvas
context.setTransform(1, 0, 0, 1, 0, 0);
context.clearRect(0, 0, canvas.width, canvas.height);

// Restore the transform
context.restore();

편집 : 이제 막 프로파일 링을 한 후 Chrome에서 300x150 (기본 크기) 캔버스를 지우려면 변환을 재설정하지 말고 약 10 % 더 빠릅니다. 캔버스의 크기가 커지면이 차이가 줄어 듭니다.

그것은 이미 상대적으로 중요하지 않지만, 대부분의 경우 여러분은 여러분이 정리하는 것보다 훨씬 더 많이 그릴 것입니다. 그리고 저는이 성능 차이가 무의미하다고 생각합니다.

100000 iterations averaged 10 times:
1885ms to clear
2112ms to reset and clear

clearRect 만 사용하는 경우 도면을 제출할 양식이있는 경우 지우기 대신 제출을 받거나 먼저 지울 수 있고 공백 도면을 업로드 할 수 있습니다. 따라서 공백 도면을 추가해야합니다. preventDefault 함수의 시작으로 :

   function clearCanvas(canvas,ctx) {
        event.preventDefault();
        ctx.clearRect(0, 0, canvas.width, canvas.height);
    }


<input type="button" value="Clear Sketchpad" id="clearbutton" onclick="clearCanvas(canvas,ctx);">

누군가가 도움이되기를 바랍니다.


간단하지만 아주 읽기 어려운 방법은 다음과 같이 작성하는 것입니다.

var canvas = document.getElementId('canvas');

// after doing some rendering

canvas.width = canvas.width;  // clear the whole canvas

다른 사람들은 이미 질문에 답하는 훌륭한 작업을 해왔지만 컨텍스트 개체에 대한 간단한 clear() 메서드가 유용 할 경우 (이것은 나에게 해당), 이것은 여기에 대한 답변을 기반으로하는 구현입니다.

CanvasRenderingContext2D.prototype.clear = 
  CanvasRenderingContext2D.prototype.clear || function (preserveTransform) {
    if (preserveTransform) {
      this.save();
      this.setTransform(1, 0, 0, 1, 0, 0);
    }

    this.clearRect(0, 0, this.canvas.width, this.canvas.height);

    if (preserveTransform) {
      this.restore();
    }           
};

용법:

window.onload = function () {
  var canvas = document.getElementById('canvasId');
  var context = canvas.getContext('2d');

  // do some drawing
  context.clear();

  // do some more drawing
  context.setTransform(-1, 0, 0, 1, 200, 200);
  // do some drawing with the new transform
  context.clear(true);
  // draw more, still using the preserved transform
};

빠른 길은하는 것입니다.

canvas.width = canvas.width

Idk 어떻게 작동하지만 그것은 않습니다!


선을 그 으려면 잊지 말아야합니다.

context.beginPath();

그렇지 않으면 라인이 지워지지 않습니다.


웹킷에서 너비를 다른 값으로 설정해야합니다. 그런 다음 다시 초기 값으로 설정할 수 있습니다


이것은 2018이며 여전히 다시 그리기를 위해 캔버스를 완전히 지우는 원래의 방법은 없습니다. clearRect() 캔버스를 완전히 지 웁니다. 비 - 채우기 유형 도면은 지워지지 않습니다 (예 : rect() ).

1. 어떻게 그리는 지에 관계없이 캔버스를 완전히 지우려면 :

context.clearRect(0, 0, context.canvas.width, context.canvas.height);
context.beginPath();

장점 : strokeStyle, fillStyle 등을 보존합니다. 지체 없음;

단점 : 아무것도 그리기 전에 이미 beginPath를 사용하고 있다면 불필요합니다.

2. 너비 / 높이 해킹 사용 :

context.canvas.width = context.canvas.width;

또는

context.canvas.height = context.canvas.height;

장점 : IE에서 작동합니다. Cons : strokeStyle을 다시 설정하고 fillStyle을 검정으로 설정합니다. 어지럼증;

네이티브 솔루션이 왜 존재하지 않는지 궁금합니다. 사실, clearRect() 는 단일 행 솔루션으로 간주됩니다. 대부분의 사용자는 새 경로를 그리기 전에 beginPath() 를 수행하기 때문입니다. beginPath는 선을 그릴 때만 사용되며 rect(). 와 같은 닫힌 경로는 사용하지 않습니다 rect().

이것이 허용 된 대답이 내 문제를 해결하지 못한 이유이며 다른 해킹 시도에 시간을 낭비하게되었습니다. 저주 mozilla


이것은 경계 및 행렬 변환에 관계없이 내가 사용하는 것입니다.

function clearCanvas(canvas) {
  const ctx = canvas.getContext('2d');
  ctx.save();
  ctx.globalCompositeOperation = 'copy';
  ctx.strokeStyle = 'transparent';
  ctx.beginPath();
  ctx.lineTo(0, 0);
  ctx.stroke();
  ctx.restore();
}

기본적으로 컨텍스트의 현재 상태를 저장하고 globalCompositeOperation 과 같이 copy 이있는 투명한 픽셀을 그립니다. 그런 다음 이전 컨텍스트 상태를 복원합니다.


캔버스의 x, y 좌표와 높이 및 너비를 전달하여 clearRect 메서드를 사용합니다. ClearRect는 다음과 같이 전체 캔버스를 지 웁니다.

canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, canvas.width, canvas.height);

Context.clearRect(starting width, starting height, ending width, ending height);

예 : context.clearRect(0, 0, canvas.width, canvas.height);


const context = canvas.getContext('2d');

context.clearRect(0, 0, canvas.width, canvas.height);

function clear(context, color)
{
    var tmp = context.fillStyle;
    context.fillStyle = color;
    context.fillRect(0, 0, context.canvas.width, context.canvas.height);
    context.fillStyle = tmp;
}

  • Chrome은 다음에 잘 응답합니다. context.clearRect ( x , y , w , h ); @ Pentium10에 의해 제안되었지만 IE9는이 명령을 완전히 무시하는 것처럼 보입니다.
  • IE9는 다음과 같이 응답합니다 : canvas.width = canvas.width; @ 존 알 소프 (Yohn Allsopp)의 첫 번째 폭 변경 솔루션을 사용하지 않는 한 선, 모양, 그림 및 기타 객체를 지우지 않습니다.

캔버스와 컨텍스트를 다음과 같이 만든 경우

var canvas = document.getElementById('my-canvas');
var context = canvas.getContext('2d');

다음과 같은 방법을 사용할 수 있습니다.

function clearCanvas(context, canvas) {
  context.clearRect(0, 0, canvas.width, canvas.height);
  var w = canvas.width;
  canvas.width = 1;
  canvas.width = w;
}




composite