Javascript 将JS动画重置为稳定的空白画布

我试图从onclick函数中清除运行JS动画的画布屏幕。 动画不是恢复到稳定的空白画布（在再次触发之前应该保持这种状态），而是在清除后立即启动

这是我用来清除画布的编码

JS

HTML

如果您需要更多信息，请告诉我

编辑：动画代码

JS

var canvas=document.getElementById（'canvas1'）；
var ctx=canvas.getContext（'2d'）；
var W=canvas.width=500//window.innerWidth；
var H=canvas.height=500//window.innerHeight；
var x=Math.floor（Math.random（）*W）；
var y=Math.floor（Math.random（）*H）；
无功转速=1；
函数animate（）{
reqAnimFrame=window.mozRequestAnimationFrame||
window.webkitRequestAnimationFrame||
window.msRequestAnimationFrame||
window.oRequestAnimationFrame
;
重新设置动画帧（动画）；
x+=速度；
如果（x=W-300）{
速度=-速度；
}
draw（）；
}
函数draw（）{
ctx.beginPath（）；
ctx.fillStyle=“清除”；
函数randCoord（）{
返回Math.floor（（Math.random（）*500）+1）；
}
ctx.lineWidth=Math.random（）*（0.5-0.01）+0.01；
ctx.moveTo（randCoord（0），randCoord（0））；
ctx.lineTo（randCoord（0），randCoord（0））；
ctx.lineTo（randCoord（0），randCoord（0））；
ctx.lineTo（randCoord（0），randCoord（0））；
ctx.lineTo（randCoord（0），randCoord（0））；
ctx.lineTo（randCoord（0），randCoord（0））；
ctx.lineTo（randCoord（0），randCoord（0））；
ctx.lineTo（randCoord（0），randCoord（0））；
ctx.lineTo（randCoord（0），randCoord（0））；
ctx.lineTo（randCoord（0），randCoord（0））；
ctx.stroke（）；
ctx.刻度（1,1）
ctx.fill（）；
}
制作动画（）；

HTML

---

为动画设置一个间隔，清除该间隔后使用

var cancelAnimationFrame = window.cancelAnimationFrame || window.mozCancelAnimationFrame;
window.cancelAnimationFrame(interval);

代码太大，无法在这里发布，但是您可以在这里看到一个快速编写的工作版本。

---

在清除画布之前，您还需要停止动画计时器。为了获得更好的帮助，请把整个代码放在一把小提琴上。

<input type="button" value="reset animation" onclick="clearleftcanvas()">

    <script>
    var canvas = document.getElementById('canvas1');
var ctx = canvas.getContext('2d');
var W = canvas.width = 500 //window.innerWidth;
var H = canvas.height = 500 //window.innerHeight;
var x = Math.floor(Math.random()*W);
var y = Math.floor(Math.random()*H);
var speed = 1;
function animate() {
reqAnimFrame = window.mozRequestAnimationFrame    ||
            window.webkitRequestAnimationFrame ||
            window.msRequestAnimationFrame     ||
            window.oRequestAnimationFrame
            ;
reqAnimFrame(animate);
x += speed;
if(x <= 0 || x >= W - 300){
    speed = -speed;
    }
    draw();
}
function draw() {  
ctx.beginPath();
 ctx.fillStyle = "clear";
function randCoord(){
return Math.floor((Math.random()*500)+1);
  }
ctx.lineWidth=  Math.random() * (0.5 - 0.01) + 0.01;
ctx.moveTo(randCoord(0),randCoord(0));
ctx.lineTo(randCoord(0),randCoord(0));
ctx.lineTo(randCoord(0),randCoord(0));
ctx.lineTo(randCoord(0),randCoord(0));
ctx.lineTo(randCoord(0),randCoord(0));
ctx.lineTo(randCoord(0),randCoord(0));
ctx.lineTo(randCoord(0),randCoord(0));
ctx.lineTo(randCoord(0),randCoord(0));
ctx.lineTo(randCoord(0),randCoord(0));
ctx.lineTo(randCoord(0),randCoord(0));
ctx.stroke();
ctx.scale(1,1)
ctx.fill();
}
animate();
</script>

<canvas id="canvas1" width="500" height="500" style="border:1px solid #FFFFF;">
</canvas>

var cancelAnimationFrame = window.cancelAnimationFrame || window.mozCancelAnimationFrame;
window.cancelAnimationFrame(interval);