如何清除画布以进行重绘

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重置所有画布状态(例如转换,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

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

这是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 Con​​s:将strokeStyle,fillStyle重置为黑色; Laggy;

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

这就是为什么接受的答案没有解决我的问题,我最终浪费时间尝试不同的黑客.诅咒你的mozilla

Answer 7

通过传递x,y坐标以及画布的高度和宽度来使用clearRect方法.ClearRect将整个画布清除为:

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

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

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

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

缺点是画布不再透明。

Answer 11

这适用于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

Answer 12

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

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。然后，还原以前的上下文状态。

Answer 13

我总是用

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

对于自定义颜色，以及

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

用于在清除时使画布透明

Answer 14

最短的方法：

canvas.width += 0

Answer 15

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

Answer 16

现在有一种.reset()方法不仅可以清除画布缓冲区，还可以完全重置上下文的所有属性（样式等），重置其转换矩阵，清除其当前子路径，清除其状态堆栈（由save()和restore())，并删除所有剪切区域。

context.reset();
// now 'context' is clear as new

基本上，它与 具有相同的效果canvas.width += 0，只是它更惯用。

然而，在当前的 Chromium 实现中，它似乎与 一样慢canvas.width += 0，它也会生成一个新的缓冲区，而不是简单地清除前一个缓冲区（导致更多的内存垃圾）。另一个需要注意的是，它目前仅在 Chromium 浏览器中受支持。不过要填充它，你可以采用 Chrome 方式

if (!CanvasRenderingContext2D.prototype.reset) {
  CanvasRenderingContext2D.prototype.reset = function() {
    this.canvas.width += 0;
  };
}
if (!OffscreenCanvasRenderingContext2D.prototype.reset) {
  OffscreenCanvasRenderingContext2D.prototype.reset = function() {
    this.canvas.width += 0;
  };
}