JavaScript 抛出 : "is not a function" when I pass object as argument

Question

这是我的简单代码:

var x = 0, y = 0;

function start() {
    var canvas = document.getElementById("myCanvas"), ctx = canvas.getContext("2d");

    animate(ctx);
}

function animate(ctx) {
    ctx.clearRect(0,0,500,500);
    ctx.fillRect(x, y, 20, 20);
    ctx.save();
    x++;
    window.requestAnimationFrame(animate);
}

当我运行此代码时，出现错误“ctx.clearRect 不是函数”，但是当我在方法 animate 中从 Canvas 获取上下文而不是将其作为参数传递时，它正在工作。

Answer 1

你必须在下一个 tick 传递 ctx 上下文，否则 ctx 参数是 undefined，并且 undefined 没有方法 clearRect

function animate(ctx) {
    ctx.clearRect(0,0,500,500);
    ctx.fillRect(x, y, 20, 20);
    ctx.save();
    x++;
    window.requestAnimationFrame(function() {
        animate(ctx);
    });
}

FIDDLE