javascript - 为什么 Canvas 上什么也没有出现？

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 Canvas 上没有显示任何内容。我已经检查过背景文件是否位于同一位置，确实如此。可能是什么问题？

Answer 1

您需要在图像加载后将图像绘制到 Canvas 上，如下所示:

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);