为什么画布上没有任何内容？

Question

这是我的代码：

var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.width = 990;
canvas.height = 409;
canvas.style.display='block';
var style=canvas.style;
style.marginLeft="auto";
style.marginRight="auto";
var position=1;
var background  = new Image();
background.src="backdrop3.jpg";
var currentImage= new Image();

document.body.appendChild(canvas);
ctx.drawImage(background, 0, 0);

出于某种原因，我的html画布上没有任何内容。我已经检查过背景文件是在同一个位置，它是。可能是什么问题？

Answer 1

你需要在加载之后将图像绘制到画布上，如下所示：

var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.width = 990;
canvas.height = 409;
canvas.style.display='block';
var style=canvas.style;
style.marginLeft="auto";
style.marginRight="auto";
var position=1;
var background  = new Image();
background.src="backdrop3.jpg";

// the important bit
background.onload = function () {
    ctx.drawImage(background, 0, 0);
}

document.body.appendChild(canvas);