javascript - 我的代码不会在屏幕上绘制图像

Question

我的问题是，当我输入 Brush.drawImg(url,x,y); 时，我无法获得将图像绘制到屏幕上的函数；

我正在使用 Visual Studio Code。

我正在制作一个游戏引擎，但我不知道如何绘制 Sprite 。

/*
The engine class I want to make so that I can code games easier, I know there are
better options, I just choose to do things the hard way so that I know how they
work from the ground up...
TLDR: I'm doing this because I like to know how things work.
*/
class ZEngine {
  constructor() {
    //for the loop thingy to constantly refresh canvas
    this.lastTime = 0;
  }

  //setup the canvas, its variables, and add it to the screen.
  createGameArea() {
    //Creating and adding the canvas
    this.gameArea = document.createElement("canvas");
    document.body.appendChild(this.gameArea);

    //Setting the variables for the canvas
    this.gameArea.context = this.gameArea.getContext("2d");
    this.gameArea.width = this.styles.gameArea.width;
    this.gameArea.height = this.styles.gameArea.height;
    this.gameArea.style = this.styles.gameArea.style;

  }

  //update the canvas 
  updateGameArea() {
    //resets the "gameArea"'s width and height and style from a style sheet the user creates.
    this.gameArea.width = this.styles.gameArea.width;
    this.gameArea.height = this.styles.gameArea.height;
    this.gameArea.style = this.styles.gameArea.style;
  }

  clearGameArea() {
    this.gameArea.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
  }

  createStyleSheet(style) {
    //user makes an object with the element name and styles of that element
    this.styles = style;
  }
  //creates the loop to constantly refresh the screen and run the functions passed through the method.
  run(fps, func) {
    function loop(timestamp) {
      //setTimeout to be able to change fps to desired output.
      setTimeout(function() {
        let deltaTime = timestamp - this.lastTime;
        this.lastTime = timestamp;
        //func() is the function that i pass through the method.
        func();
        requestAnimationFrame(loop);
      }, 1000 / fps);
    }
    //continue the loop.
    loop();
  }
}

//my class for drawing to the "game area".
class graphics {
  //gets the gameArea.context
  init(gameArea) {
    this.gameArea = gameArea;
  }

  //my attempt at drawing an image using drawImg(img, x, y) as a method.
  //this does not work, but I do not know why.
  drawImg(img, x, y) {
    this.gameArea.drawImage(img, x, y);
  }

  //draws a square to the screen.
  square(x, y, s) {
    this.gameArea.fillRect(x, y, s, s);
  }
}

//make the engine and brush.
let engine = new ZEngine();
let brush = new graphics();

//create the stylesheet for the engine to use.
engine.createStyleSheet({
  gameArea: {
    width: 1000,
    height: 600,
    style: "border: 1px solid black"
  }
});

//create the gameArea and put it on the screen
engine.createGameArea();
//get the engine's game area and context.
brush.init(engine.gameArea.context);
//run the engine at max fps 
engine.run(0, function() {
  brush.square(10, 10, 10);
  brush.drawImg("https://i2.wp.com/www.xgamers.gr/wp-content/uploads/2012/02/blocks_big.png?ssl=1", 0, 0);
});

Answer 1

您需要创建图像而不仅仅是提供 URL

var img = new Image()
img.src= "https://i2.wp.com/www.xgamers.gr/wp-content/uploads/2012/02/blocks_big.png?ssl=1"
engine.run(0, function() {
  brush.square(10, 10, 10);
  brush.drawImg(img, 0, 0);
});

/*
The engine class I want to make so that I can code games easier, I know there are
better options, I just choose to do things the hard way so that I know how they
work from the ground up...
TLDR: I'm doing this because I like to know how things work.
*/
class ZEngine {
  constructor() {
    //for the loop thingy to constantly refresh canvas
    this.lastTime = 0;
  }

  //setup the canvas, its variables, and add it to the screen.
  createGameArea() {
    //Creating and adding the canvas
    this.gameArea = document.createElement("canvas");
    document.body.appendChild(this.gameArea);

    //Setting the variables for the canvas
    this.gameArea.context = this.gameArea.getContext("2d");
    this.gameArea.width = this.styles.gameArea.width;
    this.gameArea.height = this.styles.gameArea.height;
    this.gameArea.style = this.styles.gameArea.style;

  }

  //update the canvas 
  updateGameArea() {
    //resets the "gameArea"'s width and height and style from a style sheet the user creates.
    this.gameArea.width = this.styles.gameArea.width;
    this.gameArea.height = this.styles.gameArea.height;
    this.gameArea.style = this.styles.gameArea.style;
  }

  clearGameArea() {
    this.gameArea.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
  }

  createStyleSheet(style) {
    //user makes an object with the element name and styles of that element
    this.styles = style;
  }
  //creates the loop to constantly refresh the screen and run the functions passed through the method.
  run(fps, func) {
    function loop(timestamp) {
      //setTimeout to be able to change fps to desired output.
      setTimeout(function() {
        let deltaTime = timestamp - this.lastTime;
        this.lastTime = timestamp;
        //func() is the function that i pass through the method.
        func();
        requestAnimationFrame(loop);
      }, 1000 / fps);
    }
    //continue the loop.
    loop();
  }
}

//my class for drawing to the "game area".
class graphics {
  //gets the gameArea.context
  init(gameArea) {
    this.gameArea = gameArea;
  }

  //my attempt at drawing an image using drawImg(img, x, y) as a method.
  //this does not work, but I do not know why.
  drawImg(img, x, y) {
    this.gameArea.drawImage(img, x, y);
  }

  //draws a square to the screen.
  square(x, y, s) {
    this.gameArea.fillRect(x, y, s, s);
  }
}

//make the engine and brush.
let engine = new ZEngine();
let brush = new graphics();

//create the stylesheet for the engine to use.
engine.createStyleSheet({
  gameArea: {
    width: 1000,
    height: 600,
    style: "border: 1px solid black"
  }
});

//create the gameArea and put it on the screen
engine.createGameArea();
//get the engine's game area and context.
brush.init(engine.gameArea.context);
//run the engine at max fps 
var img = new Image()
img.src= "https://i2.wp.com/www.xgamers.gr/wp-content/uploads/2012/02/blocks_big.png?ssl=1"
engine.run(0, function() {
  brush.square(10, 10, 10);
  brush.drawImg(img, 0, 0);
});