Question

我的画布中混合了静态，交互和动画对象。我似乎无法找到一种以全局方式清除绘制循环的方法，这样就不会出现“涂抹”现象。在任何对象中。我的代码如下。非常感谢任何帮助。

 <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>

Answer 1

我稍微重构了你的代码，创建了一个function update，它是画布的主循环。

＆＃13;

 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;
    update();
    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 update() {
        
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        
        moveThing();
        drawBezier();
        drawCircle();
        drawInteractive();
       
        requestAnimationFrame(update);
    }
    
    function moveThing() {
        inc++;
        ctx.beginPath();
        ctx.fillStyle = "blue";
        ctx.arc(95, 50 + inc, 40, 0, 2 * Math.PI);
        ctx.fill();
        ctx.closePath();
    }

＆＃13;

<canvas id="myCanvas" />

＆＃13;

HTML5 - 使用多个动画清除画布 - 主绘制循环在哪里？

1 个答案: