时间戳

首页 > 解决方案 > 无法在“CanvasRenderingContext2D”上执行“drawImage”：提供的值不是“类型”

javascript - 无法在“CanvasRenderingContext2D”上执行“drawImage”：提供的值不是“类型”

问题描述

我为我的游戏循环实现了一个 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

但是我收到此错误：

未捕获的类型错误：无法在“CanvasRenderingContext2D”上执行“drawImage”：提供的值不是类型“（CSSImageValue 或 HTMLImageElement 或 SVGImageElement 或 HTMLVideoElement 或 HTMLCanvasElement 或 ImageBitmap 或 OffscreenCanvas）”

它指向这行代码：

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

在绘图代码中。

如何使用此 requestAnimationFrame 使播放器精灵动画化，如何解决此错误？

标签： javascript

解决方案

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

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

如果结果未定义，您可以将调用封装在if条件中。如果已定义，则使其成为drawImage方法接受的类型。

推荐阅读