1

HTML5キャンバスに一連の画像を描画しようとしています。たとえば-APPLEという単語の場合、A.png、B.png、C.pngなどの5つの画像を連続して配置して単語を表示しようとしています。私のコードは以下の通りです：

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 に答える