此 Javascript 代码在 Canvas 上绘制部分图像:
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);
但是当我取消中间线的注释以设置 Canvas 的宽度和高度时,drawImage() 不起作用。 我应该检查什么才能发现问题?
最佳答案
您需要等待浏览器加载图片。
如果图像尚未加载,请使用 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;
}
关于javascript - Canvas drawImage() 不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18851976/