标签：主角 death hero img 登场 frame live Html new

好家伙，

 

遇到了一些非常奇怪的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,

艹

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

标签：主角,death,hero,img,登场,frame,live,Html,new
来源： https://www.cnblogs.com/FatTiger4399/p/16631577.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。