各位大神好：
小弟我在测试开发者工具的时候，出现如下诡异问题原因不解，请各位高手解答。
- 需求的场景描述（希望解决的问题）
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.innerWidthconst screenHeight = window.innerHeightlet 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等等。
？？？？？