如何向requestAnimationFrame的回调函数中传递参数

function drawAll(ball) {
    ctx.clearRect(0,0,864,664);
    drawBorder();
    ball.moveBall();
    ctx.drawImage(ball_img,ball.location_x,ball.location_y,2*ball.ballrad,2*ball.ballrad);
    requestAnimationFrame(drawall);
}

预想的是向drawall这个函数中传递ball这个对象,moveball是改变ball的位置,drawimage一行是根据ball的位置绘制ball,但这样做不能成功。
我知道可以用全局变量去实现,但求教有没有向callback中传参的方法呢,尤其是未来drawAll函数可能接受多个参数的情况下。

阅读 13.4k
5 个回答

其实跟setTimeout类似,我们知道传参传的是一个函数,那么我们是不是可以用一个匿名函数来包裹这个函数的执行呢

比如:

function fn(fc){
    console.log('fc:',fc)
    fc++;
    setTimeout(function(){
        fn(fc)
    },1000)
}
fn(1);
function drawAll(ball) {
    ctx.clearRect(0,0,864,664);
    drawBorder();
    ball.moveBall();
    ctx.drawImage(ball_img,ball.location_x,ball.location_y,2*ball.ballrad,2*ball.ballrad);
    requestAnimationFrame(function() {
        drawAll(ball)
    });
}

应该是类似这样:

function drawAll(ball) {
    function innerDrawAll(){
        ctx.clearRect(0,0,864,664);
        drawBorder();
        ball.moveBall();
        ctx.drawImage(
            ball_img,
            ball.location_x,
            ball.location_y,
            2*ball.ballrad,
            2*ball.ballrad
        );
        requestAnimationFrame(innerDrawAll);
    };
    innerDrawAll();
}
drawAll(ball);

不过要补上停止渲染的条件,有点类似递归,要有递归结束条件。类似,不是完全一样。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题