Question

我有一个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方法，但图像从未添加到画布上。

有人有什么想法吗？

谢谢：）

Answer 1

我认为第二个代码段可以正常工作，而第一个代码根本不起作用，我不知道第二个代码段是如何获得空白画布的，请考虑以下代码段，其中未选中的复选框会在没有{{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';
  }
}

无法在方法内将图像加载到画布上

1 个答案: