在尝试了合成操作和在画布上绘制图像后,我现在试图删除图像和合成。我怎么做呢?
我需要清除画布重绘其他图像;这可能会持续一段时间,所以我不认为每次都画一个新的矩形是最有效的选择。
在尝试了合成操作和在画布上绘制图像后,我现在试图删除图像和合成。我怎么做呢?
我需要清除画布重绘其他图像;这可能会持续一段时间,所以我不认为每次都画一个新的矩形是最有效的选择。
当前回答
其他人已经很好地回答了这个问题,但如果一个简单的context对象上的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
};
其他回答
最短的方法:
canvas.width += 0
用途:上下文。clearRect(0,0, canvas.)宽度,canvas.height);
这是清除整个画布的最快和最直观的方法。
不要使用:canvas。宽度= canvas.width;
重置画布。width重置所有的画布状态(例如,转换,lineWidth, strokeStyle等),它非常慢(与clearRect相比),它不能在所有浏览器中工作,并且它不能描述你实际上试图做什么。
处理变换后的坐标
如果你已经修改了转换矩阵(例如使用缩放,旋转或翻译),那么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
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(starting width, starting height, ending width, ending height);
例如:上下文。clearRect(0,0, canvas.)宽度,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);">
希望它能帮助到别人。