javascript - 无法在 'drawImage' : The provided value is not of type ' 上执行 'CanvasRenderingContext2D'

Question

我已经为我的游戏循环实现了 rAF(requestAnimationFrame) 设置:

draw: function (x, y) {
    setTimeout(function () {
        requestAnimationFrame(function() {
          Player.draw(150, 150);
        });

        //drawing code: worked perfectly with setInterval

    }, 1000 / 60);
},  

它位于 Player 对象的 draw 函数中。我打电话:

Player.draw(Player.x, Player.y);

在代码底部。

根据我在类似问题上看到的情况，在评估之前需要声明图像。我已经使用立即调用的函数在顶部加载了图像:

var images = [];

x = 0;

(function() {
    for (let i = 0; i < 20; i++) {
        images[i] = new Image();
        images[i].src = ('../webgame/assets/images/survivor-idle_shotgun_' + i + '.png');
    };
})(); // This worked perfectly with setInterval too

但是我收到此错误:

Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(CSSImageValue or HTMLImageElement or SVGImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap or OffscreenCanvas)'

它指向这行代码:

ctx.drawImage(images[this.spriteCostumeCount], this.x, this.y, this.width, this.height);

在绘图代码中。

如何使用此 requestAnimationFrame 让玩家 Sprite 动画化以及如何修复此错误？

Answer 1

您需要确保 images[this.spriteCostumeCount]已定义且类型正确。

测试这一点的一个简单方法是添加 console.log(typeof images[this.spriteCostumeCount])就在您调用 drawImage 之前方法。

如果结果未定义，您可以将调用封装在 if 中健康)状况。如果已定义，请确保该值是 drawImage 接受的类型。方法。