在 HTML5 Canvas 上绘图时出现 javascript Uncaught TypeError

Question

我正在尝试在 HTML5 Canvas 上绘制一系列图像。 例如 - 对于 APPLE 这个词，我试图将 5 张图片 - A.png、B.png、C.png 等串联起来以显示这个词。我的代码如下：

var x = 100; 
var word = "APPLE";
var imageArray = new Array();

for (var i = 0; i < word.length; i++) {
  imageArray[i] = new Image();
  imageArray[i].onload = function() {
    context.drawImage(imageArray[i], x, 25, 70, 70); // canvas context
    x += 80;
  };
  imageArray[i].src = "images/"+word.charAt(i)+".png";
}

我得到一个错误 -

javascript Uncaught TypeError: 类型错误

有人可以解释一下为什么会这样吗？实现这一目标的最佳方法是什么？

Answer 1

您的代码中有几个可能的错误来源：

1. 如果你想遍历单词中的每个字母，你应该在单词的末尾而不是索引 10 处停止：

   var word = "APPLE"; // has 5 letters
   for (var i = 0; i < word.length; i++) {
     // ... do your code
   }
   

2. 在回调onload = function() ... 中，您访问imageArray[i]，这不是您想要的，因为i 的值会修改，并且在调用它时，您访问后面的第一个元素 em> 你想要的数组。此外，您不能依赖按正确顺序加载的每个字母。你可以避免这两个错误，使用forEach:

   var word = "APPLE"; // again, the 5 letter word
   // transform the word to an array ['A', 'P', 'P', 'L', 'E']
   var letters = word.split('');
   letters.forEach(function(letter, index) {
     var image = new Image();
     image.onload = function() {
       context.drawImage(image, x + index * 80, 25, 70, 80);
     }
     image.src = "images/" + letter + ".png";
   })
   

Answer 2

循环退出后，imageArray 和 i 保留在您创建的 onload 函数中。 i 在您上次迭代后再次递增，因此它现在指向数组中未定义的元素。您可以使用函数来创建新范围：

for (var i = 0; i < word.length; i++) {
  imageArray[i] = new Image();
  imageArray[i].onload = (function(i){
    return function() {
      // i in here is now the outer function parameter instead
      // of the i in the function that creates the images
      context.drawImage(this, x+i*80, 25, 70, 70);
    }
  })(i);
  imageArray[i].src = "images/"+word.charAt(i)+".png";
}

Tharabas 的回答通常更好，但是 forEach 在 IE 中不起作用