Question

我是javascript的新手，现在我正在学习使用canvas。我想简单地检查一下我的图片在我的画布中适合多少次，但出于某种原因，每次我刷新页面后都运行这个脚本，＆＃39; wbok＆＃39;和＆＃39; wdol＆＃39;是＆＃34;无限＆＃34; - 但它只在Firefox中发生一次，在我检查时连续两次在Chrome中发生，每次我都运行脚本而不刷新（它是onclick调用的函数）我得到了正确的除法结果。

var c = document.getElementById('canvas').getContext('2d');
var myimg = new Image();
myimg.src = 'myimg.png';
var wbok = canvas.width / myimg.width;
var wdol = canvas.height / myimg.height;
console.log(wbok, wdol);

我怀疑它与图像如何加载到画布上有关，但我无法弄清楚具体细节以及如何修复它。我还尝试在设置图像源之前和之后设置onload功能：

myimg.onload = function() {
    c.drawImage(myimg, 0,0);
}

仍然是同样的问题。

Answer 1

myimg.onload = function() {
    c.drawImage(myimg, 0,0);
}

这段代码将在完成加载后立即在画布上绘制图像。但它是一个异步操作，并且您正在为图像对象的onload属性分配回调函数，因此只有在加载完成后才会调用此函数。这不会阻止程序，所以它会立即进入下一行：

var wbok = canvas.width / myimg.width;
var wdol = canvas.height / myimg.height;

但是图像可能仍然在背景中加载，因此尺寸可能是未知的，因此您在输出中看到的无限/无限。相反，您应该在回调函数内查询图像加载后的画布宽度和高度：

myimg.onload = function() {
    c.drawImage(myimg, 0,0);
    var wbok = canvas.width / myimg.width;
    var wdol = canvas.height / myimg.height;
    console.log(wbok, wdol);
}

在对图像数据进行操作后获得无穷大

1 个答案: