Javascript 如何清除画布以重新绘制

在尝试了合成操作和在画布上绘制图像之后，我现在尝试删除图像和合成。我该怎么做

---

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

鉴于

canvas

是一个canvas元素或

---

在webkit中，您需要将宽度设置为不同的值，然后可以将其设置回初始值

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

您可以使用如下方法：

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.beginPath();

否则这些行将不会被清除。

使用：

context.clearRect（0，0，canvas.width，canvas.height）
这是清除整个画布最快、最具描述性的方法

不要使用：
canvas.width=canvas.width
重置
canvas.width
重置所有画布状态（例如，转换、线宽、笔划样式等），速度非常慢（与clearRect相比），不能在所有浏览器中工作，也不能描述您实际尝试执行的操作

处理变换坐标
如果修改了变换矩阵（例如，使用
缩放
、
旋转
、或
平移
），则
上下文.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

其他人已经在回答这个问题方面做得很好，但是如果上下文对象上的一个简单的
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
};

这些都是清除标准画布的好例子，但是如果您使用paperjs，那么这将起作用：

在JavaScript中定义全局变量：

var clearCanvas = false;

从PaperScript中定义：

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

现在，无论您将clearCanvas设置为true，它都将清除屏幕上的所有项目。
这里有大量好的答案。
另一个值得注意的是，有时只清除画布的一部分是很有趣的。
也就是说，“淡出”以前的图像，而不是完全擦除它。
这可以提供很好的跟踪效果

这很容易。假设您的背景色为白色：

// 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 = 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非常慢，但fillRect是合理的

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

缺点是画布不再透明。
使用clearRect方法，通过传递画布的x、y坐标以及高度和宽度。ClearRect将清除整个画布，如下所示：

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

这对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


$（'#pieChartContainer'）.html（''）//从容器中移除画布
$（'#pieChartContainer'）.html（''）//将其添加回容器

用RGBA值填充给定矩形：

0：使用铬

0 255:使用FF和Safari

但是

让矩形填充

0255

不管浏览器是什么
 如果您仅使用clearRect，如果您在表单中有它来提交图形，您将获得一个submit而不是clearing，或者可以先清除它，然后上载一个无效图形，因此您需要在函数开始时添加一个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);">

函数clearCanvas（canvas，ctx）{
event.preventDefault（）；
clearRect（0，0，canvas.width，canvas.height）；
}

希望它能帮助别人。
一个简单但不太易读的方法是这样写：

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

// after doing some rendering

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

示例：
context.clearRect（0，0，canvas.width，canvas.height）
现在是2018年，仍然没有本机方法完全清除画布进行重画
clearRect（）
不会完全清除画布。未清除非填充类型的图形（例如，
rect（）
）

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

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

优点：保留笔画风格、填充风格等。；无滞后

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

2.使用宽度/高度调整：

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

或

优点：与IE合作
缺点：将笔划样式、填充样式重置为黑色；拉吉

我想知道为什么本地解决方案不存在。实际上，
clearRect（）
被认为是单行解决方案，因为大多数用户在绘制任何新路径之前都会执行
beginPath（）
。尽管beginPath仅在绘制直线时使用，而不是像
rect（）那样的闭合路径。

这就是为什么被接受的答案并没有解决我的问题，而我最终浪费了几个小时尝试不同的黑客。诅咒你mozilla一个快速的方法就是

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

基本上，它保存上下文的当前状态，并使用
context.canvas.width = context.canvas.width;

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

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

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

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

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