HTML5-清除带有多个动画的画布-主绘制循环在哪里？

我的画布中混合了静态、交互式和动画对象。我似乎找不到一种方法来以全局方式清除绘制循环，以便在任何对象中都没有“涂抹”。我的代码如下。非常感谢您的帮助

 <script>
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    var mouseX = 300;
    var mouseY = 300;
    var inc = 0;
    var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    moveThing();
    drawBezier();
    drawCircle();
    drawInteractive();
    var putPoint = function (e) {
        // update mouse
        mouseX = e.clientX;
        mouseY = e.clientY;
        // clear canvas
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        drawBezier();
        drawCircle();
        drawInteractive();
    }
    canvas.addEventListener("mousemove", putPoint);

    function drawBezier() {
        for (var i = 0; i < 100; i++) {
            ctx.beginPath();
            ctx.moveTo(0, 0);
            ctx.bezierCurveTo(200, mouseX, 900, -300, i * 20, 600 + Math.random() * 30);
            ctx.lineWidth = 1;
            ctx.strokeStyle = "black";
            ctx.stroke();
            ctx.closePath();
        }
    }

    function drawCircle() {
        ctx.beginPath();
        ctx.fillStyle = "red";
        ctx.arc(95, 50, 40, 0, 2 * Math.PI);
        ctx.fill();
        ctx.closePath();
    }

    function drawInteractive() {
        ctx.beginPath();
        ctx.fillStyle = "red";
        ctx.arc(mouseX, mouseY - 40, 100, 0, Math.PI * 2);
        ctx.fill();
        ctx.closePath();
    }

    function moveThing() {
        inc++;
//        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.beginPath();
        ctx.fillStyle = "blue";
        ctx.arc(95, 50 + inc, 40, 0, 2 * Math.PI);
        ctx.fill();
        ctx.closePath();
        requestAnimationFrame(moveThing);
    }
</script>

var canvas=document.getElementById（“myCanvas”）；
var ctx=canvas.getContext（“2d”）；
var-mouseX=300；
var mouseY=300；
var inc=0；
var requestAnimationFrame=window.requestAnimationFrame | | window.mozRequestAnimationFrame | | window.webkitRequestAnimationFrame | | window.msRequestAnimationFrame；
clearRect（0，0，canvas.width，canvas.height）；
移动物体（）；
德拉贝塞尔（）；
画圈（）；
drawInteractive（）；
var putPoint=函数（e）{
//更新鼠标
mouseX=e.clientX；
穆西=e.clientY；
//透明帆布
clearRect（0，0，canvas.width，canvas.height）；
德拉贝塞尔（）；
画圈（）；
drawInteractive（）；
}
canvas.addEventListener（“mousemove”，putPoint）；
函数drawBezier（）{
对于（变量i=0；i<100；i++）{
ctx.beginPath（）；
ctx.moveTo（0,0）；
ctx.bezierCurveTo（200，mouseX，900，-300，i*20600+Math.random（）*30）；
ctx.lineWidth=1；
ctx.strokeStyle=“黑色”；
ctx.stroke（）；
ctx.closePath（）；
}
}
函数drawCircle（）{
ctx.beginPath（）；
ctx.fillStyle=“红色”；
ctx.arc（95,50,40,0,2*Math.PI）；
ctx.fill（）；
ctx.closePath（）；
}
函数drawInteractive（）{
ctx.beginPath（）；
ctx.fillStyle=“红色”；
ctx.arc（mouseX，mouseY-40100,0，Math.PI*2）；
ctx.fill（）；
ctx.closePath（）；
}
函数moveThing（）{
inc++；
//clearRect（0，0，canvas.width，canvas.height）；
ctx.beginPath（）；
ctx.fillStyle=“蓝色”；
ctx.arc（95,50+inc，40,0,2*Math.PI）；
ctx.fill（）；
ctx.closePath（）；
requestAnimationFrame（移动对象）；
}

我对代码进行了一些重构，创建了一个

函数更新

，它是画布的主循环

var canvas=document.getElementById（“myCanvas”）；
var ctx=canvas.getContext（“2d”）；
var-mouseX=300；
var mouseY=300；
var inc=0；
var requestAnimationFrame=window.requestAnimationFrame | | window.mozRequestAnimationFrame | | window.webkitRequestAnimationFrame | | window.msRequestAnimationFrame；
更新（）；
var putPoint=函数（e）{
//更新鼠标
mouseX=e.clientX；
穆西=e.clientY；
//透明帆布
clearRect（0，0，canvas.width，canvas.height）；
德拉贝塞尔（）；
画圈（）；
drawInteractive（）；
}
canvas.addEventListener（“mousemove”，putPoint）；
函数drawBezier（）{
对于（变量i=0；i<100；i++）{
ctx.beginPath（）；
ctx.moveTo（0,0）；
ctx.bezierCurveTo（200，mouseX，900，-300，i*20600+Math.random（）*30）；
ctx.lineWidth=1；
ctx.strokeStyle=“黑色”；
ctx.stroke（）；
ctx.closePath（）；
}
}
函数drawCircle（）{
ctx.beginPath（）；
ctx.fillStyle=“红色”；
ctx.arc（95,50,40,0,2*Math.PI）；
ctx.fill（）；
ctx.closePath（）；
}
函数drawInteractive（）{
ctx.beginPath（）；
ctx.fillStyle=“红色”；
ctx.arc（mouseX，mouseY-40100,0，Math.PI*2）；
ctx.fill（）；
ctx.closePath（）；
}
函数更新（）{
clearRect（0，0，canvas.width，canvas.height）；
移动物体（）；
德拉贝塞尔（）；
画圈（）；
drawInteractive（）；
requestAnimationFrame（更新）；
}
函数moveThing（）{
inc++；
ctx.beginPath（）；
ctx.fillStyle=“蓝色”；
ctx.arc（95,50+inc，40,0,2*Math.PI）；
ctx.fill（）；
ctx.closePath（）；
}

---

您遇到了哪些错误？请给出一个最小的可复制代码段。寻求调试帮助的问题（“为什么此代码不工作？”）必须包括所需的行为、特定的问题或错误以及在问题本身中复制它所需的最短代码。没有明确问题陈述的问题对其他读者没有用处。谢谢，迪奥戈。我后来发现了一个类似的解决方案，在这个解决方案中，我将其他函数放入moveThing（）。在设计方面，让每个函数都有一个单独的职责会更好