TypeError:无法执行' drawImage' on' CanvasRenderingContext2D'

时间:2016-12-28 03:34:38

标签: javascript image canvas

所以我有以下构造函数:

function Source(){
    this.health_small = new Image();
    this.health_medium = new Image();
    this.health_large = new Image();
    this.health_mega = new Image();
    this.health_ultra = new Image();
    this.health_small.src = "img/health_small.png";
    this.health_medium.src = "img/health_medium.png";
    this.health_large.src = "img/health_large.png";
    this.health_mega.src = "img/health_mega.png";
    this.health_ultra.src = "img/health_ultra.png";
    this.bullet = new Image();
    this.bullet.src = "img/bullet.png";
    this.pistol_small = new Image();
    this.pistol_medium = new Image();
    this.pistol_large = new Image();
    this.pistol_small.src = "img/pistol_small.png";
    this.pistol_medium.src = "img/pistol_medium.png";
    this.pistol_large.src = "img/pistol_large.png";
    this.heavy_small = new Image();
    this.heavy_medium = new Image();
    this.heavy_large = new Image();
    this.heavy_small.src = "img/heavy_small.png";
    this.heavy_medium.src = "img/heavy_medium.png";
    this.heavy_large.src = "img/heavy_large.png";
    this.shotgun_small = new Image();
    this.shotgun_medium = new Image();
    this.shotgun_large = new Image();
    this.shotgun_small.src = "img/shotgun_small.png";
    this.shotgun_medium.src = "img/shotgun_medium.png";
    this.shotgun_large.src = "img/shotgun_large.png";
}

此函数将所有图像加载到名为src

的对象中

我为所有弹药都有另一个弹药构造函数,但是有一个switch语句来告诉它应该是什么样的弹药,ex" pistol_ammo"。

switch(type){
    default: 
    // Small ammo
    case "pistol_small":
    this.width = _9mm_casew;
    this.height = _9mm_caseh; 
    this.giveAmount = amount_small; 
    this.color = color_pistol;
    this.img = src.pistol_small; break;
    case "heavy_small":
    this.width = _heavy_casew;
    this.height = _heavy_caseh; 
    this.giveAmount = amount_small; 
    this.color = color_heavy;
    this.img = src.heavy_small; break;
    case "shotgun_small":
    this.width = _12gauge_casew;
    this.height = _12gauge_caseh; 
    this.giveAmount = amount_small; 
    this.color = color_shotgun;
    this.img = src.shotgun_small; break;
    // Medium ammo
    case "pistol_medium":
    this.width = _9mm_cartw;
    this.height = _9mm_caseh;
    this.giveAmount = amount_medium; 
    this.color = color_pistol;
    this.src = src.pistol_medium; break;
    case "heavy_medium":
    this.width = _heavy_cartw;
    this.height = _heavy_carth;
    this.giveAmount = amount_medium; 
    this.color = color_heavy;
    this.img = src.heavy_medium; break;
    case "shotgun_medium":
    this.width = _12gauge_cartw;
    this.height = _12gauge_carth;
    this.giveAmount = amount_medium; 
    this.color = color_shotgun;
    this.img = src.shotgun_medium; break;
    //Large ammo
    case "pistol_large":
    this.width = _9mm_boxw;
    this.height = _9mm_carth;
    this.giveAmount = amount_large; 
    this.color = color_pistol;
    this.img = src.pistol_large; break;
    case "heavy_large":
    this.width = _heavy_boxw;
    this.height = _heavy_boxh;
    this.giveAmount = amount_large; 
    this.color = color_heavy;
    this.img = src.heavy_large; break;
    case "shotgun_large":
    this.width = _12gauge_boxw;
    this.height = _12gauge_boxh;
    this.giveAmount = amount_large;
    this.color = color_shotgun;
    this.img = src.shotgun_large; break;
}

最后,如果数组中存在任何弹药对象,它会调用一个show函数在画布上显示它。

    for(var i = ammo.length - 1; i >= 0; i--){
        ammo[i].show();
    }

这是show函数:

this.show = function(){
    g.drawImage(this.img, this.x, this.y);
}

我在stackoverflow和其他几个网站上搜索过

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

我正在尝试这一切,没有任何库或框架。

编辑:由于拼写错误和缺少信息,我做了一些编辑,对不起:S

0 个答案:

没有答案