如何清除画布以进行重绘

Question

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

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

Answer 1

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

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

Answer 2

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

这是清除整个画布最快和最描述的方法。

不要使用：canvas.width = canvas.width;

重置canvas.width重置所有帆布状态（例如转换，线宽的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）是约10％的速度来清除300x150（默认大小）画布，无需重新设置转换。作为画布的大小增加了这种差异下降。

这已经是相对较少，但在大多数情况下，你会被相当多的绘制比你清除，我相信这样的性能差异是无关紧要的。

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

Answer 3

如果您正在绘制线条，请务必不要忘记：

context.beginPath();

否则，线不会得到清除。

Answer 4

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

Answer 5

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

Answer 6

使用clearRect方法通过使X，Y坐标和高度和帆布的宽度。 ClearRect将清除整个画布为：

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

Answer 7

这是2018，并且仍然存在要为重绘完全清楚画布没有本机方法。 clearRect()的不完全清除画布。非填充类型附图不清除出去（例如rect()）

1.To的完全清除画布不论如何绘制：

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

优点：果脯的StrokeStyle，填充样式等;没有滞后;

缺点：不必要的，如果你正在绘制任何事情之前已经用beginPath

2，采用宽度/高度劈：

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

OR

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

优点：作品与IE 缺点：复位的StrokeStyle，填充样式为黑色; Laggy;

我想知道为什么天然解不存在。事实上，clearRect()被视为单行方案，因为大多数用户都绘制任何新的路径之前beginPath()。虽然beginPath方法是仅在画线和像rect().不闭合路径中使用

这是为什么公认的答案并没有解决我的问题的原因和我结束了浪费时间尝试不同的黑客。诅咒你的Mozilla

Answer 8

有一吨好这里的答案。 一个更值得注意的是，有时它的乐趣，只是部分清除画布。 也就是说，“淡出”以前的图像，而不是完全消除它。 这可以给出很好的小径的效果。

它很容易。假设你的背景颜色是白色：

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

Answer 9

一个快速的方法是做

canvas.width = canvas.width

它是如何工作IDK但它确实！

Answer 10

WebKit中需要的宽度设置为不同的值，则可以将其设置回初始值

Answer 11

我发现，在所有浏览器我测试，最快的方法是实际fillRect白色，或您想whataever颜色。我有一个非常大的监视器和在全屏模式和clearRect是极其缓慢的，但fillRect是合理的。

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

的缺点是，在画布不再透明。

Answer 12

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

Answer 13

这在chart.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

Answer 14

这就是我使用的，无论边界和矩阵变换：

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 作为 globalCompositeOperation. 。然后，恢复之前的上下文状态。

Answer 15

一个简单，但不是很可读的方式是写：

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

// after doing some rendering

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

Answer 16

我总是使用

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

Answer 17

最快的方法：

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

Answer 18

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，点击 无论浏览器！

Answer 19

如果你只使用clearRect，如果您有它的形式提交您的图纸，你会得到一个提交，而不是清算，或者它可以先清除，然后上传空白图纸，所以你需要在该函数的beggining添加的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);">

希望它可以帮助别人。

Answer 20

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

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

Answer 21

这是你如何清除标准画布外的所有伟大的例子，但如果你正在使用paperjs，那么这将工作：

在JavaScript中定义一个全局变量：

var clearCanvas = false;

从您PaperScript定义：

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

现在，无论你设置clearCanvas为true，它会清除屏幕上的所有项目。