本文主要是介绍Html飞机大战(五):主角登场（英雄类编辑），对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

好家伙，

遇到了一些非常奇怪的bug

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

179的代码:

paint(context) {
                this.img=this.frame[this.frameIndex];
                context.drawImage(this.img, this.x, this.y, this.width, this.height)
            }

这里的能够正常渲染,然后后面hero英雄类的却不能渲染了

(一头雾水了)

一切都还是那样

1.正常的图片数组配置

const hero_frame = {
            live: [],
            death: []
        }
        hero_frame.live[0] = new Image();
        hero_frame.live[0].src = "img/hero1.jpg"
        hero_frame.live[1] = new Image();
        hero_frame.live[1].src = "img/hero2.jpg"
        hero_frame.death[0] = new Image();
        hero_frame.death[0].src = "img/hero_blowup_n1.jpg"
        hero_frame.death[1] = new Image();
        hero_frame.death[1].src = "img/hero_blowup_n2.jpg"
        hero_frame.death[2] = new Image();
        hero_frame.death[2].src = "img/hero_blowup_n3.jpg"
        hero_frame.death[3] = new Image();
        hero_frame.death[3].src = "img/hero_blowup_n4.jpg"

这次在网上弄了些好看的图片过来

2.正常的配置项和类编辑

       const HERO = {
            frame: hero_frame,
            width: 99,
            x: 0,
            y: 0,
            speed: 10,
        }
        //英雄类配置
        class Hero {
            constructor(config) {
                this.width = config.width;
                this.height = config.heigth;
                this.x = (480 - config.width) / 2;
                this.y = 650 - config.height;
                this.frame = config.frame;
                //用死/活来控制要渲染的图片组
                this.img = null;
                this.live = true;
            }
            judge() {

            }

            paint(context) {
                
                this.img = this.frame.live[0];
                context.drawImage(this.img, this.x, this.y, this.width, this.height);
            }


        }

3.正常的实例化类

const hero = new Hero(HERO);

4.正常的方法调用

hero.paint(context);

一切都是那么的正常,但结果是他并没有渲染出来

(bug搜了很久也没有找到解决方案)

暂时先用个假代码:

context.drawImage(hero_frame.live[0], 0, 0);

最后发现,我是傻逼

配置项里面没写height属性

height: 148,

艹

行了,能跑就行,不用管报错

这篇关于Html飞机大战(五):主角登场（英雄类编辑）的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！