Question

我正在使用requestAnimationFrame开始我的研究。我想在画布上放一个圆圈，然后点击一个按钮将该圆圈设置为运动。我意外地使用以下代码实现了它。但我不明白。我期待看到的代码是在画布上绘制的圆圈，然后按下按钮时在该圆圈顶部绘制另一个圆圈。第一个圆圈将保留在屏幕上，处于静止位置，而另一个圆圈开始运动。再一次，我不小心实现了我想要的目标，但我不想因为看起来错误而建立起来。我需要做些什么来纠正我的代码，以便圆圈出现在屏幕上，然后点击按钮启动？

<script>
    var canvas = document.querySelector('canvas');
    var c = canvas.getContext('2d');

    // Creates a ball in location (but why does it disappear?) 
        c.beginPath(); 
        c.lineWidth = 5; 
        c.arc(145, 100, 75, 0, Math.PI * 2, true);
        c.stroke();

    var y = 100; 

    function ballDrop(){
        requestAnimationFrame(ballDrop);
        c.clearRect(0, 0, 300, 800);
        // Create Ball
        c.beginPath();
        c.lineWidth = 5;
        c.arc(145, y, 75, 0, Math.PI * 2, true);
        c.stroke();     
        y += 1;
    }       
</script>

Answer 1

您的代码按预期执行，因为： 1.在画布上绘制一个初始圆圈 2.单击执行change_key(x);的按钮 3.在ballDrop内，清除上下文绘制区域，删除所有以前的绘制。这就是原始圆圈消失的原因。

一些注意事项： *您不需要继续设置ballDrop，除非您计划更改lineWidth *您应该将context移到功能的末尾。这主要是为了清晰起见，因为requestAnimationFrame是异步的（如requestAnimationFrame），因此功能不会受到影响。

示例 https://jsfiddle.net/m503wa4g/6/

setTimeout

Answer 2

function ballDrop(){
    // start the animation that runs forever
    requestAnimationFrame(ballDrop);
    // clear the canvas so nothing is on the canvas
    // this is why the circle disappears
    c.clearRect(0, 0, 300, 800);
    // Create first Ball again so it doesn't disappear
    c.beginPath(); 
    c.lineWidth = 5; 
    c.arc(145, 100, 75, 0, Math.PI * 2, true);
    c.stroke();
    // Create Dropping Ball that is 1 pixel down (y+=1)
    c.beginPath();
    c.lineWidth = 5;
    c.arc(145, y, 75, 0, Math.PI * 2, true);
    c.stroke();
    y += 1;
}

使用requestAnimationFrame

2 个答案: