Question

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

client.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：在画布中可见，但未绘制图像。如果我查看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);
};

找到图像但不可见Nodejs和Express

1 个答案: