我有一个Javascript类,该类具有一种加载图像并将其添加到画布的方法。
起初我是这样做的:
var context = this.cardCanvas.getContext('2d');
var cardWidth = this.cardWidth;
var img = new Image();
img.src = '../shared/images/logo.png';
context.drawImage(img, (cardWidth / 2) - (img.width / 2), 75);
此方法大约工作10次中的8次,因此我一直在寻找一种解决方案以使其每次都能始终如一地工作。许多网站和SO帖子都声明要使用这样的代码:
var context = this.cardCanvas.getContext('2d');
var cardWidth = this.cardWidth;
var img = new Image();
img.onload = function() {
context.drawImage(img, (cardWidth / 2) - (img.width / 2), 75);
};
img.src = '../shared/images/logo.png';
但是当我这样做时,尽管调试显示调用了onload方法,但图像从未添加到画布上。
有人有什么想法吗?
谢谢:)
答案 0 :(得分:0)
我认为第二个代码段可以正常工作,而第一个代码根本不起作用,我不知道第二个代码段是如何获得空白画布的,请考虑以下代码段,其中未选中的复选框会在没有{{1}的情况下呈现图像}事件,其他onload
事件正在定义:
onload
function load() {
var context = cardCanvas.getContext('2d');
var cardWidth = 500;
var img = new Image();
context.clearRect(100, 0, 200, 200);
//unchecked - without onload
if (!document.querySelector('input').checked) {
img.src = 'http://placekitten.com/200/75';
context.drawImage(img, (cardWidth / 2) - (img.width / 2), 75);
}
//checked - with onload
else {
img.onload = function() {
context.drawImage(img, (cardWidth / 2) - (img.width / 2), 75);
};
img.src = 'http://placekitten.com/200/75';
}
}