如何清除canvas重绘

在实验完成复合操作并在canvas上绘制图像后，我正在尝试删除图像和合成。 我如何做到这一点？

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

Answer 1

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

Answer 2

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

这是清除整个canvas的最快和最具描述性的方法。

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

重置canvas.width重置所有canvas状态（例如，转换，lineWidth，strokeStyle等），它非常缓慢（与clearRect相比），它不适用于所有浏览器，并且不描述你实际尝试的内容去做。

处理转换后的坐标

如果您已经修改了转换matrix（例如，使用scale ， rotate或translate ），那么context.clearRect(0,0,canvas.width,canvas.height)可能不会清除canvas的整个可见部分。

解决scheme？ 在清除canvas之前重置转换matrix：

 // 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中）清除一个300×150（默认大小）的canvas约10％，而不重置变换。 随着canvas尺寸的增加，这种差异会减less。

这已经相对微不足道了，但是在大多数情况下，你将会比你清理的要多得多，我相信这个性能差异是无关紧要的。

 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所build议的，但是IE9似乎完全忽略了这个指令。
• IE9似乎回应： canvas.width = canvas.width; 但它不会清除线条，只是形状，图片和其他物体，除非您也使用@John Allsopp的首先改变宽度的解决scheme。

所以如果你有一个像这样创build的canvas和上下文：

 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

通过传递x，y坐标和canvas的高度和宽度来使用clearRect方法。 ClearRect将清除整个canvas为：

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

Answer 7

这里有很多很好的答案。 还有一点需要注意的是，有时只是部分清除canvas是有趣的。 即“淡出”前一张图片，而不是完全删除它。 这可以给不错的path效果。

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

 // 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 8

这在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 9

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

Answer 10

 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 11

我发现，在我testing的所有浏览器中，最快的方法是用白色或者任何你想要的颜色填充。 我有一个非常大的显示器，并在全屏模式下clearRect是痛苦地慢，但fillRect是合理的。

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

缺点是canvas不再透明。

Answer 12

最快的方式：

 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 13

这些都是如何清除标准canvas的很好的例子，但是如果您使用的是paperjs，那么这将工作：

在JavaScript中定义一个全局variables：

 var clearCanvas = false; 

从您的PaperScript定义：

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

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

Answer 14

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

用RGBA值填充给定的矩形：
0 0 0 0：与铬
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
不pipe浏览器！

Answer 15

如果你只使用clearRect，如果你有一个表单提交你的绘图，你会得到一个提交，而不是清除，或者可以先清除，然后上传一个无效的绘图，所以你需要添加一个在函数的开始时防止默认：

  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 16

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

 var canvas = document.getElementId('canvas'); // after doing some rendering canvas.width = canvas.width; // clear the whole canvas 

Answer 17

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

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