在 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 修改并在调用它时，您访问所需数组后面 的第一个元素。此外，您不能指望每个字母都以正确的顺序加载。您可以通过使用 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";
   })