답변:
const context = canvas.getContext('2d');
context.clearRect(0, 0, canvas.width, canvas.height);
context.clearRect(0, 0, context.canvas.width, context.canvas.height)
합니다. 그것은 사실상 같은 것이지만 하나의 의존성이 적습니다 (2 대신 1 변수)
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
canvas
사용하여 지역 변수 의 필요성을 제거 할 수 있습니다 ctx.canvas
.
canvas.width
및 canvas.height
청소 때. 변환 재설정과 비교하여 런타임 차이에 대한 수치 분석을 수행하지 않았지만 약간 더 나은 성능을 낼 것으로 생각됩니다.
선을 그리는 경우 다음을 잊지 마십시오.
context.beginPath();
그렇지 않으면 줄이 지워지지 않습니다.
beginPath
하십시오. 기존 경로를 지우려는 캔버스를 지우고 있습니다! 이것은 끔찍한 관행이며 그림을 거꾸로 보는 방법입니다.
beginPath
는 캔버스에서 아무것도 지우지 않고 경로를 재설정하여 이전 경로 항목을 그리기 전에 제거합니다. 아마도 필요할 수도 있지만 그리기 작업으로, 지우기 작업이 아닙니다. clear, beginPath 및 draw, clear 및 beginPath, draw하지 마십시오. 차이가 의미가 있습니까? 예를 보려면 여기를보십시오 : w3schools.com/tags/canvas_beginpath.asp
다른 사람들은 이미 질문에 대답하는 훌륭한 일을했지만 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
};
context.clearRect ( x , y , w , h );
@ Pentium10에서 제안한대로 잘 응답 하지만 IE9는이 지침을 완전히 무시하는 것 같습니다.canvas.width = canvas.width;
하지만 먼저 너비를 변경하는 @John 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;
}
context.clearRect(0,0,context.canvas.width,context.canvas.height)
.
function clearCanvas(ctx) { ctx.beginPath(); ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); }
이것은 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을 검은 색으로 재설정합니다. 게으른;
네이티브 솔루션이 존재하지 않는 이유가 궁금합니다. 실제로 clearRect()
대부분의 사용자는 beginPath()
새로운 경로를 그리기 전에 수행 하기 때문에 단일 회선 솔루션으로 간주됩니다 . beginPath는 선을 그릴 때만 사용되며 닫힌 경로는 아닙니다.rect().
이것이 받아 들여진 대답이 내 문제를 해결하지 못한 이유이며 다른 해킹을 시도하는 데 몇 시간을 낭비했습니다. 모질라 저주
x, y 좌표와 캔버스의 높이와 너비를 전달하여 clearRect 메소드를 사용하십시오. ClearRect는 전체 캔버스를 다음과 같이 지 웁니다.
canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, canvas.width, canvas.height);
여기에 좋은 대답이 많이 있습니다. 또 다른 참고 사항은 때때로 캔버스를 부분적으로 만 지우는 것이 재미 있다는 것입니다. 즉, 이전 이미지를 완전히 지우는 대신 "페이드 아웃"합니다. 이것은 좋은 트레일 효과를 줄 수 있습니다.
그것은 간단합니다. 배경색이 흰색이라고 가정합니다.
// 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);
빠른 방법은
canvas.width = canvas.width
작동 방식은 Idk이지만 작동합니다!
이것은 경계 및 행렬 변환에 관계없이 내가 사용하는 것입니다.
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
as로 투명 픽셀을 그립니다 globalCompositeOperation
. 그런 다음 이전 컨텍스트 상태를 복원합니다.
이것은 chart.js의 pieChart에서 작동했습니다.
<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
function clear(context, color)
{
var tmp = context.fillStyle;
context.fillStyle = color;
context.fillRect(0, 0, context.canvas.width, context.canvas.height);
context.fillStyle = tmp;
}
나는 항상 사용
cxt.fillStyle = "rgb(255, 255, 255)";
cxt.fillRect(0, 0, canvas.width, canvas.height);
context.clearRect(0,0,w,h)
주어진 사각형을 RGBA 값으로 채 웁니다 : 000
0 : Chrome으로
0 255 255 : FF & Safari로
그러나
context.clearRect(0,0,w,h);
context.fillStyle = 'rgba(0,0,0,1)';
context.fillRect(0,0,w,h);
브라우저에 관계없이 사각형을
0 0 0 255로
채 웁니다!
가장 빠른 방법 :
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
입니다.
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);">
그것이 누군가를 돕기를 바랍니다.
다음은 표준 캔버스를 지우는 방법에 대한 훌륭한 예이지만 paperjs를 사용하는 경우 작동합니다.
JavaScript에서 전역 변수를 정의하십시오.
var clearCanvas = false;
PaperScript에서 다음을 정의하십시오.
function onFrame(event){
if(clearCanvas && project.activeLayer.hasChildren()){
project.activeLayer.removeChildren();
clearCanvas = false;
}
}
이제 clearCanvas를 true로 설정하면 화면에서 모든 항목이 지워집니다.
clearRect
는 필요 어느 쪽 변형되지 않은 상황을, 또는 실제의 경계를 추적.