如何清除画布以重画

在尝试了复合操作并在画布上绘制图像之后，我现在尝试删除图像并进行合成。我该怎么做呢？

我需要清除画布才能重画其他图像；这可能会持续一段时间，所以我认为每次绘制一个新矩形都不是最有效的选择。

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

• Chrome响应良好：context.clearRect ( x , y , w , h );@ Pentium10建议，但IE9似乎完全忽略了此指令。
• 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;
}

这是2018年，仍然没有原生方法可以完全清除画布以进行重画。clearRect() 不能完全清除画布。非填充类型的图形未清除（例如rect()）

1. 无论您如何绘画，都要完全清除画布：

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

优点：保留strokeStyle，fillStyle等；没有滞后；

缺点：如果在绘制任何内容之前已经在使用beginPath，则不需要

2.使用width / height hack：

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

要么

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

优点：与IE搭配使用缺点：将strokeStyle，fillStyle重置为黑色；ggy

我想知道为什么不存在本机解决方案。实际上，这clearRect()被视为单行解决方案，因为大多数用户beginPath()在绘制任何新路径之前都会这样做。虽然beginPath仅在绘制线条而不是闭合路径时使用rect().

这就是为什么被接受的答案不能解决我的问题，而导致我浪费大量时间尝试其他黑客的原因。诅咒你mozilla

通过传递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

知道它是如何工作的，但是确实可以！

这是我使用的，无论边界和矩阵转换如何：

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

基本上，它将保存上下文的当前状态，并使用copyas 绘制一个透明像素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

我发现在我测试过的所有浏览器中，最快的方法是用白色或任何您想要的颜色实际填充。我有一个非常大的监视器，在全屏模式下，clearRect非常慢，但是fillRect是合理的。

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

缺点是画布不再透明。

在Webkit中，您需要将宽度设置为其他值，然后可以将其设置回初始值

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

我总是用

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

context.clearRect(0,0,w,h)   

用RGBA值填充给定的矩形：
0 0 0 0：使用Chrome
0 0 0 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
！

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

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

最短的方法：

canvas.width += 0

最快的方法：

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

希望它可以帮助某人。

我总是用这个

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

注意

如果您要这样做，则将clearRect和requestAnimationFrame结合使用可实现更流畅的动画

这些都是清除标准画布的绝佳示例，但是如果您使用paperjs，则可以使用：

在JavaScript中定义全局变量：

var clearCanvas = false;

从PaperScript中定义：

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

现在，无论将clearCanvas设置为true哪里，它都将清除屏幕上的所有项目。