HTML5 Canvas创建“清除画布”按钮的正确方法

我创建了一个绘图应用程序并让我的清除按钮和功能正常工作。但是，当我单击画布重新绘制某个东西时，旧图形会弹出。我知道我需要做一些恢复，但我不确定如何去做。谢谢你的帮助。HTML5 Canvas创建“清除画布”按钮的正确方法

HTML

的Javascript

function init(){ 
    canvas = document.getElementById('board'); 
    context = canvas.getContext('2d'); 

    canvas2 = document.getElementById('board2'); 
    context2 = canvas2.getContext('2d'); 

} 

function clearall() 
{ 

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

}

来源

2016-04-28 Katie Sak

听起来像你需要为每个新绘图添加'beginPath'。如果没有它，以前的每个图纸都将重新绘制新图。（重新绘制==回到最后一个beginPath，如果有的话）。 – markE

只需在画布上画一个白色正方形将其清除。

context.beginPath(); 
context.rect(0,0,canvas.width,canvas.height); 
context.fillStyle = "#FFF"; 
context.fill();

来源

2016-04-28 00:09:12

嗯，这不起作用，只是清除画布，但它像以前一样弹出 –

当你说“它再次弹出”时，你指的是什么？如果你正在制作一个有主循环的游戏，那么你的绘图函数会一遍又一遍地执行，并在白色方块的顶部绘图。你能发布你的实际代码吗？ –

我的意思是，当我清除后，我删除的绘图会在画布上回来，一旦我再次单击画布以创建另一个绘图。我的文件很大，所以我不能发布整个东西，但这里是JavaScript代码片段。函数init（）{ canvas = document.getElementById（'board'）; context = canvas.getContext（'2d'）;} function clearall（）{ context.rect（0,0，canvas.width，canvas.height）; context.fillStyle =“#FFF”; context.fill（）;} –

HTML5 Canvas创建“清除画布”按钮的正确方法

回答

相关问题