다시 그리기 위해 캔버스를 지우는 방법

다시 그리기 위해 캔버스를 지우는 방법

합성 조작을 실험해, 캔버스에 화상을 그린 후, 이미지를 삭제하고 합성하려고 합니다.이거 어떻게 해?

다른 이미지를 다시 그리기 위해 캔버스를 클리어해야 합니다.이것은 당분간 계속될 수 있기 때문에 매번 새로운 직사각형을 그리는 것이 가장 효율적인 방법은 아니라고 생각합니다.

canvas캔버스 요소 또는 객체입니다.

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

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

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

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

안 함:canvas.width = canvas.width;

중 ★★canvas.width든든 、 lineWidth 、 strokeStyle ） 。이것은 매우 느리고(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

선을 긋는 경우 다음 사항을 잊지 마십시오.

context.beginPath();

그렇지 않으면 회선이 지워지지 않습니다.

에 잘 했지만, 대답한다면, 그것은 잘 대답한 것입니다.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
};

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 단점: strokeStyle을 리셋하고, fillStyle을 블랙으로 리셋하고, Laggy;

나는 왜 네이티브 솔루션이 존재하지 않는지 궁금했다. 로로 actually actually actually actually.clearRect()가 단일 회선 됩니다.대부분의 사용자는beginPath()★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★, 때만 사용되며 beginPath와 같이 할 수 .rect().

이것이 받아들여진 답변이 나의 문제를 해결하지 못하고 결국 다른 해킹을 시도하느라 몇 시간을 허비하게 된 이유입니다.모질라 저주

• : 크롬의 반응이다.context.clearRect ( x , y , w , h );@Pentium10에 의해 제안되었지만 IE9은 이 명령을 완전히 무시하는 것 같습니다.
• 은 다음과 같이 하는 것 같습니다. IE9는 다음과 같습니다.canvas.width = canvas.width;그러나 먼저 폭을 바꾸는 @John Allsop의 솔루션을 사용하지 않는 한 선이나 모양, 그림, 기타 오브젝트만 선명하게 할 수 없습니다.

캔버스와 콘텍스트가 다음과 같이 작성되어 있는 경우:

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;
}

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

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

빠른 방법은 하는 것이다.

canvas.width = canvas.width

어떻게 작동하는지는 모르겠지만, 작동한다!

여기 좋은 답변들이 많이 있습니다.한 가지 더 주의할 점은 때때로 캔버스를 부분적으로만 지우는 것이 재미있다는 것입니다.즉, 이전 이미지를 완전히 지우는 대신 "삭제"하는 것입니다.이것은 좋은 트레일 효과를 줄 수 있다.

쉬워요.배경색이 흰색인 경우:

// assuming background color = white and "eraseAlpha" is a value from 0 to 1.
myContext.fillStyle = "rgba(255, 255, 255, " + eraseAlpha + ")";
myContext.fillRect(0, 0, w, h);

경계 및 매트릭스 변환에 관계없이 다음과 같이 사용합니다.

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();
}

하고 투명 .copy그런 다음 이전 컨텍스트 상태를 복원합니다.

나는 항상 사용한다

ctx.fillStyle = "rgb(255, 255, 255)";
ctx.fillRect(0, 0, canvas.width, canvas.height);

커스텀 컬러의 경우

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

지울 때 캔버스를 투명하게 만들기 위해

이 방법은 그림의 pieChart에 적용되었습니다.js

<div class="pie_nut" id="pieChartContainer">
    <canvas id="pieChart" height="5" width="6"></canvas> 
</div>

$('#pieChartContainer').html(''); //remove canvas from container
$('#pieChartContainer').html('<canvas id="pieChart" height="5" width="6"></canvas>'); //add it back to the container

제가 테스트하는 모든 브라우저에서 가장 빠른 방법은 Rect에 흰색 또는 원하는 색상을 채우는 것입니다.저는 매우 큰 모니터를 가지고 있으며, 풀스크린 모드에서는 clearRect가 매우 느리지만 fillRect는 합리적입니다.

context.fillStyle = "#ffffff";
context.fillRect(0,0,canvas.width, canvas.height);

단점은 캔버스가 더 이상 투명하지 않다는 것입니다.

최단 경로:

canvas.width += 0

private clearCanvas() {
  const canvas: HTMLCanvasElement = this.ctx.canvas
  this.ctx.save()
  this.ctx.setTransform(1, 0, 0, 1, 0, 0)
  this.ctx.clearRect(0, 0, canvas.width, canvas.height)
  this.ctx.restore()
}

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

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

간단하지만 그다지 읽기 쉽지는 않은 방법은 다음과 같습니다.

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

// after doing some rendering

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

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

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

항상 쓰고 있어요.

ctx.clearRect(0, 0, canvas.width, canvas.height)
window.requestAnimationFrame(functionToBeCalled)

메모

clearRect와 requestAnimationFrame을 조합하면 보다 유연한 애니메이션을 얻을 수 있습니다.

가장 빠른 방법:

canvas = document.getElementById("canvas");
c = canvas.getContext("2d");

//... some drawing here

i = c.createImageData(canvas.width, canvas.height);
c.putImageData(i, 0, 0); // clear context by putting empty image data

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);">

도움이 됐으면 좋겠는데

Clear Canvas 버튼이 있는 프리핸드 드로잉 캔버스입니다.
그릴 수 있는 캔버스의 라이브 예를 참조해 주세요.또, 필요에 따라서, 다시 그릴 수 있도록 클리어 할 수도 있습니다.clearRect()이전 캔버스를 삭제하는 데 사용됩니다.fillRect()깨끗하고 그림이 없는 초기 캔버스를 다시 그리는 데 사용됩니다.

var canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d"),
    painting = false,
    lastX = 0,
    lastY = 0,
    lineThickness = 1;

canvas.width=canvas.height = 250;
ctx.fillRect(0, 0, 250, 250);

canvas.onmousedown = function(e) {
    painting = true;
    ctx.fillStyle = "#ffffff";
    lastX = e.pageX - this.offsetLeft;
    lastY = e.pageY - this.offsetTop;
};

canvas.onmouseup = function(e){
    painting = false;
}

canvas.onmousemove = function(e) {
    if (painting) {
        mouseX = e.pageX - this.offsetLeft;
        mouseY = e.pageY - this.offsetTop;

        // find all points between        
        var x1 = mouseX,
            x2 = lastX,
            y1 = mouseY,
            y2 = lastY;


        var steep = (Math.abs(y2 - y1) > Math.abs(x2 - x1));
        if (steep){
            var x = x1;
            x1 = y1;
            y1 = x;

            var y = y2;
            y2 = x2;
            x2 = y;
        }
        if (x1 > x2) {
            var x = x1;
            x1 = x2;
            x2 = x;

            var y = y1;
            y1 = y2;
            y2 = y;
        }

        var dx = x2 - x1,
            dy = Math.abs(y2 - y1),
            error = 0,
            de = dy / dx,
            yStep = -1,
            y = y1;

        if (y1 < y2) {
            yStep = 1;
        }

        lineThickness = 4;

        for (var x = x1; x < x2; x++) {
            if (steep) {
                ctx.fillRect(y, x, lineThickness , lineThickness );
            } else {
                ctx.fillRect(x, y, lineThickness , lineThickness );
            }

            error += de;
            if (error >= 0.5) {
                y += yStep;
                error -= 1.0;
            }
        }



        lastX = mouseX;
        lastY = mouseY;

    }
}
var button=document.getElementById("clear");
button.onclick=function clearcanvas(){
  canvas=document.getElementById("canvas"),
  ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, 250, 250);
canvas.width=canvas.height = 250;
ctx.fillRect(0, 0, 250, 250);}

#clear{border-radius:10px;
font-size:8px !important;
position:absolute;
top:1px;}
#canvas{border-radius:10px}

<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet"/>
<button id="clear" class="w3-padding w3-xxlarge w3-pink" type="button">Clear Canvas</button>
<canvas id="canvas"></canvas>

다음은 모두 표준 캔버스를 클리어하는 방법의 좋은 예입니다.paperj 를 사용하고 있는 경우는, 다음과 같이 동작합니다.

JavaScript에서 글로벌 변수를 정의합니다.

var clearCanvas = false;

PaperScript에서 정의:

function onFrame(event){
    if(clearCanvas && project.activeLayer.hasChildren()){
        project.activeLayer.removeChildren();
        clearCanvas = false;
    }
}

이제 clearCanvas를 true로 설정하면 화면에서 모든 항목이 지워집니다.

언급URL : https://stackoverflow.com/questions/2142535/how-to-clear-the-canvas-for-redrawing