时间戳

首页 > 解决方案 > 在方法内将图像 onload 添加到画布不起作用

javascript - 在方法内将图像 onload 添加到画布不起作用

问题描述

我有一个带有加载图像并将其添加到画布的方法的 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 方法。

有人有想法么？

谢谢 ：）

标签： javascriptimagecanvasonloaddrawimage

解决方案

我认为第二个片段工作得很好，第一个根本不起作用，我不知道你是如何用第二个得到一个空白画布的，考虑下面的片段，其中未选中的复选框呈现图像而没有onload事件 elseonload事件被定义：

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';
  }
}
<input type="checkbox" />
<button onclick="load()">load</button>
<canvas id="cardCanvas"></canvas>

推荐阅读