javascript clearrect 如何清除画布以进行重绘




javascript canvas clearrect (14)

在画布上试验复合操作和绘制图像后,我现在试图去除图像和合成。 我该怎么做呢?

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


最快的方式:

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

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

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

如果你只使用clearRect,如果你有一个表单提交你的图纸,你会得到一个提交,而不是清除,或者可以先清除,然后上传一个无效图纸,所以你需要添加一个在函数开始时的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);">

希望它能帮助别人。


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

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

var clearCanvas = false;

从您的PaperScript定义:

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

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


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

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

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

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

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

处理转换后的坐标

如果修改了变换矩阵(例如使用scalerotatetranslate ),则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

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

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
不管浏览器!


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

一个简单的,但不是很可读的方法是写这个:

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

// after doing some rendering

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

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


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

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


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

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

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

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

缺点是画布不再透明。





composite