node.js - 找到图像但不可见 Nodejs 和 Express

Question

我有一个 Canvas ，我想在 Canvas 中加载图像。

客户端.js

game.viewport = document.getElementById('viewport');
    game.card1 = document.getElementById('card1');

        //Adjust their size
    game.viewport.width = game.world.width;
    game.viewport.height = game.world.height;

    game.card1.width = game.cards.width;
    game.card1.height = game.cards.height;

        //Fetch the rendering contexts
    game.ctx = game.viewport.getContext('2d');
    game.ctx2 = game.card1.getContext('2d');

game_core.js

 game_core.prototype.client_cards = function(game_instance) {
this.instance = game_instance;
var img = new Image();
img.src = '/images/Chainlinks/AddBurn.png';
this.ctx2.drawImage(img,10,20);
this.ctx2.fillStyle = 'rgba(255,255,255,0.7)';
this.ctx2.fillText('Summoner: '+player1, 10 , 20);

文本 Summnor2: 在 Canvas 中可见，但未绘制图像。如果我查看 node.js 的 de cmd，他会找到图像路径。所以我真的不知道哪里出了问题。

Answer 1

尝试这样的事情。确保图像路径正确。

var self = this;
var img = new Image();
img.src = './images/Chainlinks/AddBurn.png';
img.onload = function() {
  self.ctx2.drawImage(img,10,20);
  self.ctx2.fillStyle = 'rgba(255,255,255,0.7)';
  self.ctx2.fillText('Summoner: '+player1, 10 , 20);
};