为什么我的canvas clearRect无法正常工作？

Question

I set up an interval:

tick = setInterval(function(){
    render();
}, 1000 / 25)

Then each render() I clear rect and expect to see a dot travel across the screen.

function render() {

    ctx.clearRect(0, 0, 1000, 1000);

    circle(sprite.x, sprite.y, sprite.r);

    for (var i = 0; i < animations.length; i++) {
        var s = animations[i];
        if( s.target ){
            Engine.Animate(s);
        }
    }
}

But for some reason, I'm ending up drawing every single position of the dot, rather than just one.

Example: https://jsfiddle.net/yvmbsjj1/1/

Answer 1

You need to tell the canvas context that you are starting a path, and then your clearRect will work. Use the beginPath() method to do this.

function render() {
        ctx.beginPath(); // This is needed 

        ctx.clearRect(0, 0, 1000, 1000);

        circle(sprite.x, sprite.y, sprite.r);

        for (var i = 0; i < animations.length; i++) {
            var s = animations[i];
            if( s.target ){
                Engine.Animate(s);
            }
        }
    }

This is needed when drawing lines, arcs, circles, rectangles, etc... And should be called every time you render, to initialize a new path.