在尝试了合成操作和在画布上绘制图像后,我现在试图删除图像和合成。我怎么做呢?
我需要清除画布重绘其他图像;这可能会持续一段时间,所以我不认为每次都画一个新的矩形是最有效的选择。
在尝试了合成操作和在画布上绘制图像后,我现在试图删除图像和合成。我怎么做呢?
我需要清除画布重绘其他图像;这可能会持续一段时间,所以我不认为每次都画一个新的矩形是最有效的选择。
当前回答
Context.clearRect(starting width, starting height, ending width, ending height);
例如:上下文。clearRect(0,0, canvas.)宽度,canvas.height);
其他回答
最短的方法:
canvas.width += 0
这是2018年,仍然没有本地的方法来完全清除画布重新绘制。clearRect()不会完全清除画布。非填充型图纸不清除(例如。矩形())
1.要完全清除画布,无论你如何绘制:
context.clearRect(0, 0, context.canvas.width, context.canvas.height);
context.beginPath();
优点:保留strokeStyle, fillStyle等;没有滞后;
缺点:如果你在绘制任何东西之前已经使用了beginPath,那就不必要了
2.使用宽度/高度hack:
context.canvas.width = context.canvas.width;
OR
context.canvas.height = context.canvas.height;
优点:与IE兼容 缺点:重置strokeStyle, fillStyle为黑色;延迟;
我想知道为什么本地解决方案不存在。实际上,clearRect()被认为是单行解决方案,因为大多数用户在绘制任何新路径之前都会执行beginPath()。虽然beginPath只在绘制线条时使用,而不是像rect()那样使用封闭路径。
这就是为什么接受的答案并没有解决我的问题,我最终浪费时间尝试不同的方法。诅咒你mozilla
Chrome响应良好:上下文。clearRect (x, y, w, h);正如@Pentium10所建议的,但IE9似乎完全忽略了这条指令。 IE9似乎对:canvas做出了响应。宽度= canvas.width;但它不清除线条,只是形状,图片和其他物体,除非你也使用@John Allsopp的解决方案,首先改变宽度。
如果你有一个canvas和context是这样创建的:
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;
}
这里有很多很好的答案。 还有一点需要注意的是,有时候只清除部分画布也很有趣。 也就是说,“淡出”之前的图像,而不是完全擦除它。 这样可以产生很好的轨迹效果。
很容易。假设你的背景颜色是白色:
// 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);
如果你只使用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);">
希望它能帮助到别人。