Question

我正在尝试创建一个清除画布的按钮，但没有成功。

我的代码

JS

function clearcanvas1(){
ctx.clearRect(0, 0, canvas.width, canvas.height); 
var w = canvas.width; canvas.width = 1; canvas.width = w; 
}

HTML

<button onmouseover="clearcanvas1()">clear</button>

我尝试了其他选项，例如

canvas.width = canvas.width;

和

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

目前我已将clear按钮替换为location.reload函数，但它会在我想要独立操作的同一页面上打乱辅助画布。我怎样才能做到这一点？

Answer 1

您似乎没有在您的函数中（或实际上它的上下文）中获取canvas元素...

function clearcanvas1()
{
    var canvas = document.getElementById('canvas'),
        ctx = canvas.getContext("2d");
    ctx.clearRect(0, 0, canvas.width, canvas.height);
}

显然，您需要更新document.getElementById()以表示标记的正确ID，或者您可以使用document.getElementsByTagName()。

Answer 2

按钮上的

调用以下功能

function clearall()
{
    var canvas=document.getElementById("canvas+id");
    var context=canvas.getContext("2d");
    context.clearRect(0,0,canvas.width,canvas.height);
}

希望这会对你有所帮助。请注意，此功能将清除画布中的所有内容。

清除画布按钮

2 个答案: