背景图加载不出来

Question

老师，我查了好多遍code，都没发现有啥问题，但是背景图就是加载不出来。不知道为什么会这样？

Answer 1

提问者 314580250 2019-03-29 11:06:07

1 2 3 4 5 6 7 8

export const Resources = [     ['background', 'res/background.png'],     ['land', 'res/land.png'],     ['pencilUp', 'res/pie_up.png'],     ['pencilDown', 'res/pie_down.png'],     ['birds', 'res/birds.png'],     ['startButton', 'res/start_button.png'] ];

Answer 2

提问者 314580250 2019-03-28 13:36:52

但是我的宽和高都和视频一样的，还是没能把背景图渲染出来啊。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

//初始化整个游戏的精灵，作为游戏开始的入口 import {ResourceLoader} from "./js/base/ResourceLoader.js"; import {BackGround} from "./js/runtime/BackGround.js"; export class Main {     constructor() {         this.canvas = document.getElementById('game_canvas');         this.ctx = this.canvas.getContext('2d');         const loader = ResourceLoader.create();         loader.onloaded(map => this.onResourceFirstloaded(map));         let image = new Image();         image.src = '../res/background.png';         image.onload = () => {             this.ctx.drawImage(                 image,                 0,                 0,                 image.width,                 image.height,                 0,                 0,                 image.width,                 image.height             );         }     }     onResourceFirstloaded(map) {         let background = new BackGround(this.ctx, map.get('background'));         background.draw();     } }

• qq_慕仙8046749 #1

  是不是资源路径有问题？image.src = '/res/background.png';

• 提问者 314580250 回复 qq_慕仙8046749 #2

  没错啊，我也是这样写的

Answer 3

傅猿猿 2019-03-26 16:46:43

这个应该是你的，就是这个图片的，整个的坐标上出现问题了，你看你的图片他只加载了上面一部分，而下面是并没有被绘制出来的，也就是说呢，你的问题是出在你的末尾参数，也就是决定他的高度的参数上的。

• 提问者 314580250 #1

  但是我的宽和高都和视频一样的，还是没能把背景图渲染出来啊。
  
  //初始化整个游戏的精灵，作为游戏开始的入口
  import {ResourceLoader} from "./js/base/ResourceLoader.js";
  import {BackGround} from "./js/runtime/BackGround.js";
  export class Main {
      constructor() {
          this.canvas = document.getElementById('game_canvas');
          this.ctx = this.canvas.getContext('2d');
          const loader = ResourceLoader.create();
          loader.onloaded(map => this.onResourceFirstloaded(map));
          let image = new Image();
          image.src = '../res/background.png';
          image.onload = () => {
              this.ctx.drawImage(
                  image,
                  0,
                  0,
                  image.width,
                  image.height,
                  0,
                  0,
                  image.width,
                  image.height
              );
          }
      }
      onResourceFirstloaded(map) {
          let background = new BackGround(this.ctx, map.get('background'));
          background.draw();
      }
  }