Javascript Canvas drawImage（）不工作

此Javascript代码在画布上绘制部分图像：

var img = document.getElementById('img');
var canvas = document.getElementById('can');
//canvas.width = img.width;
//canvas.height = img.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);

但是，当我取消注释中间行以设置画布宽度和高度时，drawImage（）不起作用。 我应该检查什么才能发现问题

var img = document.getElementById('img');

尝试将变量命名为其他名称。还要确保加载了一些图像

---

请尝试我的小提琴以获取更多想法

您需要等待浏览器加载图像

如果图像尚未加载，请使用

onload

事件，并将代码更改为以下内容：

var img = document.getElementById('img');
var canvas = document.getElementById('can');
var ctx = canvas.getContext("2d");

var callback = function(image) {
   if(!image) image = this;
   canvas.width = img.width;
   canvas.height = img.height;
   ctx.drawImage(image, 0, 0);
}

if(img.complete) { //check if image was already loaded by the browser
   callback(img);
}else {
   img.onload = callback;
}

---

在图像加载之前，宽度和高度图像属性不会设置，因此我建议您将代码放入onLoad（）图像事件中。

如果图像在绑定之前已经加载，这是否有效onload@sabithpocker我更新了我的答案，检查它是否已经加载。现在它在这两种情况下都能工作。我已经从img.onload=function（）{…}@Joe调用了代码。你是什么意思？我的意思是，问题发生在回调内部。为什么你认为取消注释会产生问题？