javascript Uncatch TypeError 在 HTML5 Canvas 上绘制时

javascript Uncaught TypeError while drawing on HTML5 Canvas

本文关键字：绘制 Canvas HTML5 Uncatch TypeError javascript      更新时间：2023-09-26

我正在尝试在HTML5画布上绘制一系列图像。例如 - 对于 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 未捕获类型错误：类型错误

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

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

  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";
})

循环退出后，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";
}

塔拉巴斯的答案通常更好，但是forEach在IE <9中不起作用

相关文章：