在尝试了合成操作和在画布上绘制图像后,我现在试图删除图像和合成。我怎么做呢?
我需要清除画布重绘其他图像;这可能会持续一段时间,所以我不认为每次都画一个新的矩形是最有效的选择。
在尝试了合成操作和在画布上绘制图像后,我现在试图删除图像和合成。我怎么做呢?
我需要清除画布重绘其他图像;这可能会持续一段时间,所以我不认为每次都画一个新的矩形是最有效的选择。
当前回答
使用clearRect方法通过传递x,y坐标和画布的高度和宽度。ClearRect将清除整个画布:
canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, canvas.width, canvas.height);
其他回答
这适用于我的pieChart in chart.js
<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
最快的方式:
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
如果你只使用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);">
希望它能帮助到别人。
一个快速的方法就是去做
canvas.width = canvas.width
我不知道它是如何工作的,但它确实如此!
这些都是如何清除标准画布的好例子,但如果你使用的是paperjs,那么这将工作:
用JavaScript定义一个全局变量:
var clearCanvas = false;
从你的PaperScript定义:
function onFrame(event){
if(clearCanvas && project.activeLayer.hasChildren()){
project.activeLayer.removeChildren();
clearCanvas = false;
}
}
现在无论你在哪里设置clearCanvas为true,它都会从屏幕上清除所有的项目。