Javascript drawImage函数失败

Question

我玩过绘图功能，但现在我转向图像时遇到了麻烦。这是代码：

var x
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var ghost = new Image();
ghost.src = "ghost.png"

window.setTimeout(x, 5000);


var drawIm = function (sprite) {
    ctx.save();
    ctx.translate(100, 100);
    ctx.drawImage(sprite, 0, 0, sprite.width, sprite.height, 0, 0, sprite.width, sprite.height);
    ctx.restore();
};


drawIm(ghost);

我确定这与文件名或任何东西无关，我看不出它有任何问题，但幽灵不会出现！有什么问题？

Answer 1

加载时需要绘制幽灵。所以，做一些像...

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var ghost = new Image();

//ghost onload event
ghost.onload = function() {
   drawIm(ghost);
}

ghost.src = "https://lessonpix.com/drawings/2587/100x100/Happy+Ghost.png";

var drawIm = function(sprite) {
   ctx.save();
   ctx.translate(100, 100);
   ctx.drawImage(sprite, 0, 0, sprite.width, sprite.height, 0, 0, sprite.width, sprite.height);
   ctx.restore();
};

<canvas id="canvas" width="200" height="200"></canvas>

Javascript drawImage函数失败

Javascript drawImage function fail

javascript

canvas

drawimage