Question

所以我是一个画布新手，我写了一些试图创建动画的代码。我想用一个抛物线方程做一个球移动，一切都很好，除了这个事实，我没有动画，而是基本上得到一个由弧线组成的抛物线。

以下是我用于动画的代码：

// a b c are calculated in another function and they are used to calculate the parabola, x1 and y1 are the coordinates of the ball
function drawball(a,b,c,x1,y1){
    canvas=document.getElementById("mycanvas");
    ctx=canvas.getContext("2d");
    ctx.beginPath();
    ctx.arc(x1,y1,25,0,2*Math.PI);
    ctx.stroke();
    //stop when i get to the final point (x3 is a const)
    if(x1<x3){
        y1=a*(x1*x1)+b*x1+c; //parabola formula
        x1++;
        window.requestAnimationFrame(drawball(a,b,c,x1,y1));
    }
}

在chrome的控制台中，我收到此错误：

Failed to execute 'requestAnimationFrame' on 'Window': The callback
provided as parameter 1 is not a function.

感谢您的帮助！

Answer 1

您试图将drawball函数的返回值传递到requestAnimationFrame回调（未定义）。

当您尝试将值传递给requestAnimationFrame并且不是函数时，Chrome控制台中的示例

> requestAnimationFrame(console.log('hi'))

VM82：1未捕获的TypeError：无法执行＆＃39; requestAnimationFrame＆＃39; on＆＃39; Window＆＃39;：作为参数1提供的回调不是函数。 at：1：1

通过匿名函数：

> requestAnimationFrame(() => { console.log('hi') })

喜

您需要传递一个函数，该函数将在requestAnimationFrame计时器结束时调用。

这方面的一个例子是：

// Vanilla Javascript
window.requestAnimationFrame(function() { drawball(a,b,c,x1,y1) } );

// ES6
window.requestAnimationFrame(() => { drawball(a,b,c,x1,y1) } );

在这些情况下，传递给requestAnimationFrame的参数是一个将被调用并执行drawball函数的函数。

画布动画（window.requestAnimationFrame）

1 个答案: