8

此 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() 不起作用。我应该检查什么才能发现问题?

4

3 回答 3

16

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

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

看到这个工作演示

于 2013-09-17T14:10:41.533 回答
0

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

于 2013-09-17T14:11:09.337 回答
0
var img = document.getElementById('img');

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

试试我的小提琴http://jsfiddle.net/aliasm2k/tAum2/以获得更多想法

于 2013-09-17T14:07:35.523 回答