好家伙,
遇到了一些非常奇怪的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英雄类的却不能渲染了
(一头雾水了)
一切都还是那样
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"
这次在网上弄了些好看的图片过来
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); } }
const hero = new Hero(HERO);
hero.paint(context);
一切都是那么的正常,但结果是他并没有渲染出来
(bug搜了很久也没有找到解决方案)
暂时先用个假代码:
context.drawImage(hero_frame.live[0], 0, 0);
最后发现,我是傻逼
配置项里面没写height属性
height: 148,
艹
行了,能跑就行,不用管报错