1

我正在尝试在 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: 类型错误

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

4

2 回答 2

3

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

  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修改了它的值，并且在调用它时，您访问了所需数组后面的第一个元素。此外，您不能依赖按正确顺序加载的每个字母。您可以使用以下方法避免这两个错误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";
})
于 2012-06-19T11:29:51.900 回答
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 < 9 中不起作用

于 2012-06-19T11:30:28.473 回答