游戏引擎机制问题
各位大神好: 小弟我在测试开发者工具的时候,出现如下诡异问题原因不解,请各位高手解答。 - 需求的场景描述(希望解决的问题) 1、直接使用如下canvas函数是直接可以在屏幕中显示的。 [代码]let ctx = canvas.getContext([代码][代码]'2d'[代码][代码]);[代码][代码]ctx.fillStyle = [代码][代码]"#FFFFFF"[代码][代码];[代码][代码]ctx.font = [代码][代码]"30px Arial"[代码][代码];[代码][代码]ctx.fillText([代码][代码]"Hello World"[代码][代码], 50, 50);[代码] 2、使用绘制图片函数则无法显示任何信息(注:当前为静态显示) [代码]import BG from [代码][代码]'./runtime/bg'[代码][代码]import BackGround from [代码][代码]'./runtime/background'[代码][代码]const BG_IMG_SRC = [代码][代码]'images/bg.jpg'[代码][代码]const screenWidth = window.innerWidth[代码][代码]const screenHeight = window.innerHeight[代码][代码]let ctx = canvas.getContext([代码][代码]'2d'[代码][代码])[代码] [代码]export [代码][代码]default[代码] [代码]class Main1 {[代码][代码] [代码][代码]constructor() {[代码][代码] [代码][代码]this[代码][代码].restart();[代码][代码] [代码][代码]}[代码][代码] [代码][代码]restart() {[代码][代码] [代码][代码]//print hello world[代码][代码] [代码][代码]console.log([代码][代码]"test2"[代码][代码]);[代码][代码] [代码][代码]ctx.fillStyle = [代码][代码]"#FFFFFF"[代码][代码];[代码][代码] [代码][代码]ctx.font = [代码][代码]"30px Arial"[代码][代码];[代码][代码] [代码][代码]ctx.fillText([代码][代码]"Hello World"[代码][代码], 50, 50);[代码][代码] [代码][代码]this[代码][代码].img = [代码][代码]new[代码] [代码]Image();[代码][代码] [代码][代码]this[代码][代码].img.src = BG_IMG_SRC;[代码][代码] [代码][代码]this[代码][代码].width = 512;[代码][代码] [代码][代码]this[代码][代码].height = 512;[代码][代码] [代码][代码]this[代码][代码].top = 0[代码][代码] [代码][代码]ctx.drawImage([代码][代码] [代码][代码]this[代码][代码].img,[代码][代码] [代码][代码]0,[代码][代码] [代码][代码]0,[代码][代码] [代码][代码]this[代码][代码].width,[代码][代码] [代码][代码]this[代码][代码].height,[代码][代码] [代码][代码]0,[代码][代码] [代码][代码]-screenHeight + [代码][代码]this[代码][代码].top,[代码][代码] [代码][代码]screenWidth,[代码][代码] [代码][代码]screenHeight[代码][代码] [代码][代码])[代码][代码] [代码][代码]}[代码][代码]}[代码] 3、采用游戏样例中的循环刷新代码则可以显示图片 [代码]import BackGround from [代码][代码]'./runtime/background'[代码] [代码]let ctx = canvas.getContext([代码][代码]'2d'[代码][代码])[代码] [代码]/**[代码][代码] [代码][代码]* 游戏主函数[代码][代码] [代码][代码]*/[代码][代码]export [代码][代码]default[代码] [代码]class Main {[代码][代码] [代码][代码]constructor() {[代码][代码] [代码][代码]// 维护当前requestAnimationFrame的id[代码][代码] [代码][代码]this[代码][代码].aniId = 0[代码][代码] [代码][代码]this[代码][代码].restart()[代码][代码] [代码][代码]}[代码] [代码] [代码][代码]restart() {[代码][代码] [代码][代码]this[代码][代码].bg = [代码][代码]new[代码] [代码]BackGround(ctx)[代码][代码] [代码][代码]this[代码][代码].bindLoop = [代码][代码]this[代码][代码].loop.bind([代码][代码]this[代码][代码])[代码] [代码] [代码][代码]// 清除上一局的动画[代码][代码] [代码][代码]//window.cancelAnimationFrame(this.aniId);[代码][代码] [代码][代码]this[代码][代码].aniId = window.requestAnimationFrame([代码][代码] [代码][代码]this[代码][代码].bindLoop,[代码][代码] [代码][代码]canvas[代码][代码] [代码][代码])[代码][代码] [代码][代码]console.log([代码][代码]"this.aniId="[代码] [代码]+ [代码][代码]this[代码][代码].aniId);[代码][代码] [代码][代码]}[代码] [代码] [代码][代码]/**[代码][代码] [代码][代码]* canvas重绘函数[代码][代码] [代码][代码]* 每一帧重新绘制所有的需要展示的元素[代码][代码] [代码][代码]*/[代码][代码] [代码][代码]render() {[代码][代码] [代码][代码]//ctx.clearRect(0, 0, canvas.width, canvas.height)[代码][代码] [代码][代码]this[代码][代码].bg.render(ctx)[代码][代码] [代码][代码]}[代码] [代码] [代码][代码]// 实现游戏帧循环[代码][代码] [代码][代码]loop() {[代码][代码] [代码][代码]this[代码][代码].render()[代码][代码] [代码][代码]this[代码][代码].aniId = window.requestAnimationFrame([代码][代码] [代码][代码]this[代码][代码].bindLoop,[代码][代码] [代码][代码]canvas[代码][代码] [代码][代码])[代码][代码] [代码][代码]//console.log("this.aniId=" + this.aniId);[代码][代码] [代码][代码]}[代码][代码]}[代码] - 希望提供的能力 1、请说为什么没有循环绘制,文字输出显示而图片不显示; 2、有没有引擎的说明手册或者API等等。