关于javascript：如何清除画布以进行重绘

How to clear the canvas for redrawing

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

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

1
2
3

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

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

相关讨论

@BPlus，为我工作…
在Chrome9.0.597.107上设置宽度对我有效，但在Safari5.0.3(Windows)上不适用。
注意，对于clearRect，您需要有一个未转换的上下文，或者跟踪您的实际边界。
还要注意，设置画布宽度a)需要将其设置为不同的值，然后为了WebKit兼容性再次返回；b)这将重置上下文转换。
事实上，宽度技巧会导致2D画布和WebGL中fps的下降——更喜欢使用.clearrect，这是标准方法。
@bplus:context.canvas.width = context.canvas.width清除上下文。也适用于铬合金。
@卡达吉，它可能会工作，但它实质上比其他选择慢，并破坏你的画布的状态。当你能使用专门为清理画布而设计的方法时，为什么要使用慢速黑客？
我想知道为什么没有一个可以与路径一起使用的context.clear()函数，比如context.fill()。
宽度技巧真的很好，只需再增加一个使它更简单的方法，就是canvas.width+=0，当你用getElementById()得到画布而不存储它时，它很有用。
@B1K音乐：这很容易使用目的地输出合成来模拟。JsFiddle。
@全球复合材料初学者仍然需要学习如何使用这些材料。无论如何，CanvasRenderingContext2D.prototype.clear()似乎是一个应该在标准库中的函数。
不要使用宽度技巧。这是一个肮脏的黑客。在高级语言(如javascript)中，您想要的是最好地陈述您的意图，然后让低级代码实现它们。设置宽度本身并不能说明您的真正意图，即清除画布。
我注意到改变宽度在Firefox中引入了一个问题，即画布的下一次绘制被延迟。如果你在两幅画布上使用不同动画的多幅画布，这就变得越来越烦人了，因为这两幅画布需要完全对齐。长话短说：使用clearrect(特别是如果你计划使用多个画布来表现)。
jspef:jspef.com/clear-canvas2
一个很小的建议，但我建议用context.clearRect(0, 0, context.canvas.width, context.canvas.height)。实际上，它是相同的，但是依赖性少了一个(1个变量而不是2个变量)
回复：在高级语言中声明意图——在任何真实的上下文中，程序员都需要做当前工作良好的任何事情，不管他们使用的是什么语言。他们不能等多久才改变基础技术。您可以通过将函数命名为"ClearCanvas"或调用名为"ClearCanvas"的外部库函数来明确您的意图。(很明显，我不是在提倡黑客。我只是说，如果你真的使用它，你只需将它包装在一个名为"clearcanvas"的函数中，就可以让你的意图足够清晰。
对于此答案的最新读者：请注意，此答案已被修改，并且上述某些评论不再适用。
了解你的背景：var c = document.getElementById('canv1')和var context = c.getContext('2d')
解决方案对我有效，我对解决方案投了赞成票，但当我清除画布时有一个问题，画布的背景色也被清除了。画布背景色成为主体背景，如何解决这个问题？请帮忙。

用途：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)可能无法清除画布的整个可见部分。

解决方案？清除画布前重置转换矩阵：

1
2
3
4
5
6
7
8
9

// 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%。随着画布大小的增加，这种差异会减小。

这已经是相对无关紧要的了，但在大多数情况下，你会画得比你正在清除的要多得多，我相信这一性能差异是无关的。

1
2
3

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

相关讨论

@yumyumyum:clear()是标准函数吗？似乎不是。
@脑残83，谢谢你的努力…演示jsfiddle.net/ktqfs
注意，您可以使用ctx.canvas来消除对本地canvas变量的需求。
@Drewnoakes，不错，但为了速度的目的，我几乎总是选择单独的变量。这是非常小的，但我试图通过对经常使用的属性(尤其是动画循环内部)进行别名来避免取消引用时间。
@Drewnoakes plus每次输入的字符就少了4个！
由于图像链接中断，Alexandern的演示不再有效，修复了：jsfiddle.net/ktqfs/50
处理转换坐标解决了我的问题，谢谢
在转换矩阵修改的情况下清除整个画布的另一种方法是简单地跟踪转换，并在清除时自己将它们应用于canvas.width和canvas.height。与重置转换相比，我没有对运行时差异进行任何数值分析，但我怀疑这会使性能有所改善。
@Nanowizard，我没有具体测试清除，但是我在以前写的画布包装libs中做过类似的事情(例如，在转换后计算命中盒)。根据我的经验，设置转换是非常有效和高度优化的(就像保存/恢复状态一样)。如果您可以选择使用这些内置优化，那么每次都要选择它们！
在我看来，这似乎是API中的一个漏洞。应该有一个标准化的clear()调用，它不需要传递参数。但我想我不是标准委员会的成员……P
垃圾收集怎么样？这两种方法是否具有相同的WRT GC行为？同样值得注意的是，根据simonsarris.com/blog/346-how-you-clear-your-canvas-matters，width方法在safari上更快。
@Erikallik，你提到了一个2011年的博客，上面只提到了Windows上的Safari，可能不是市场的关键部分。警告：垃圾收集，我没有做任何测试，但是clearRect是一个绘图命令，它对内存的影响不应该超过调用fillRect或任何其他绘图方法。对画布width的分析更改可能更有趣，但还有太多其他原因不使用它来使其值得付出努力。
好点，你可能是对的。
正是我需要的。
这就是答案。

如果要绘制线条，请确保不要忘记：

1	context.beginPath();

否则线路就不会被清除。

相关讨论

其他人已经很好地回答了这个问题，但是如果上下文对象上的一个简单的clear()方法对您(对我来说)有用的话，这就是我基于以下答案使用的实现：

1
2
3
4
5
6
7
8
9
10
11
12
13

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

用途：

1
2
3
4
5
6
7
8
9
10
11
12
13

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对@pentium10建议的context.clearRect ( x , y , w , h );反应很好，但ie9似乎完全忽略了这个指令。
IE9似乎响应：canvas.width = canvas.width;，但它不清楚线条、形状、图片和其他对象，除非您也使用@john allsopp的解决方案来首次更改宽度。

因此，如果您有这样一个画布和上下文：

1 2	var canvas = document.getElementById('my-canvas'); var context = canvas.getContext('2d');

您可以使用这样的方法：

1
2
3
4
5
6

function clearCanvas(context, canvas) {
context.clearRect(0, 0, canvas.width, canvas.height);
var w = canvas.width;
canvas.width = 1;
canvas.width = w;
}

相关讨论

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

1
2
3

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

相关讨论

这是2018年，仍然没有完全清除画布重新绘制的本地方法。clearRect()没有完全清除画布。未清除非填充式图纸(如rect())

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

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

优点：保留strokestyle、fillstyle等；无滞后；

缺点：如果在绘制之前已经使用了beginpath，则不需要

2.使用宽度/高度hack：

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

或

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

专业：与IE合作缺点：重置strokestyle，fillstyle为黑色；laggy；

我想知道为什么不存在本地解决方案。实际上，clearRect()被认为是单线解决方案，因为大多数用户在绘制任何新路径之前都会先执行beginPath()。虽然beginpath只在绘制线条时使用，而不是像rect().那样封闭的路径。

这就是为什么被接受的答案不能解决我的问题，结果我浪费了几个小时尝试不同的黑客。诅咒你Mozilla

相关讨论

这里有很多好答案。另一个需要注意的是，有时候只清理画布的一部分是很有趣的。也就是说，"淡出"前一个图像，而不是完全删除它。这可以产生很好的轨迹效果。

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

1
2
3

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

相关讨论

一个快速的方法就是

1	canvas.width = canvas.width

我想知道它是如何工作的，但它确实如此！

相关讨论

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

相关讨论

1
2
3
4
5
6
7

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

相关讨论

这对chart.js中的piechart很有用。

1
2
3
4
5

<canvas id="pieChart" height="5" width="6"></canvas>

$('#pieChartContainer').html(''); //remove canvas from container
$('#pieChartContainer').html('<canvas id="pieChart" height="5" width="6"></canvas>'); //add it back to the container

我发现，在我测试的所有浏览器中，最快的方法是用白色填充，或者你想要的任何颜色。我有一个非常大的显示器，在全屏模式下，ClearRect速度非常慢，但是FillRect是合理的。

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

缺点是画布不再透明。

这就是我所使用的，不管边界和矩阵变换是什么：

1
2
3
4
5
6
7
8
9
10

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绘制了一个透明像素。然后，恢复以前的上下文状态。

相关讨论

最快的方式：

1
2
3
4
5
6
7

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

相关讨论

一个简单但不太可读的方法是写：

1
2
3
4
5

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

// after doing some rendering

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

我总是使用

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

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

用rgba值填充给定的矩形：0 0 0 0:带Chrome0 0 0 0 255:带FF&Safari

但是

1
2
3

context.clearRect(0,0,w,h);
context.fillStyle = 'rgba(0,0,0,1)';
context.fillRect(0,0,w,h);

让矩形填充0 0 0 0不管是浏览器！

如果您只使用clearect，如果您有一个表单提交您的图纸，您将得到一个提交而不是清除，或者可能它可以先清除，然后上传一个无效的图纸，所以您需要在函数的开头添加一个preventdefault：

1
2
3
4
5
6
7

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

希望它能帮助别人。

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

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

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

在javascript中定义全局变量：

1	var clearCanvas = false;

从书面脚本中定义：

1
2
3
4
5
6

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

现在，无论您将ClearCanvas设置为true，它都将从屏幕上清除所有项目。

相关讨论