在尝试了合成操作和在画布上绘制图像后,我现在试图删除图像和合成。我怎么做呢?
我需要清除画布重绘其他图像;这可能会持续一段时间,所以我不认为每次都画一个新的矩形是最有效的选择。
在尝试了合成操作和在画布上绘制图像后,我现在试图删除图像和合成。我怎么做呢?
我需要清除画布重绘其他图像;这可能会持续一段时间,所以我不认为每次都画一个新的矩形是最有效的选择。
当前回答
我总是用
ctx.fillStyle = "rgb(255, 255, 255)";
ctx.fillRect(0, 0, canvas.width, canvas.height);
对于自定义颜色,和
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.width = canvas.width
我不知道它是如何工作的,但它确实如此!
假设canvas是一个canvas元素或者OffscreenCanvas对象,使用clearRect:
const context = canvas.getContext('2d');
context.clearRect(0, 0, canvas.width, canvas.height);
在webkit中,您需要将宽度设置为不同的值,然后您可以将其设置回初始值
这里有很多很好的答案。 还有一点需要注意的是,有时候只清除部分画布也很有趣。 也就是说,“淡出”之前的图像,而不是完全擦除它。 这样可以产生很好的轨迹效果。
很容易。假设你的背景颜色是白色:
// 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);