背景图加载不出来

Question

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

Answer 1

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

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

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

//初始化整个游戏的精灵，作为游戏开始的入口
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();
      }
  }