2

私は HTML5 にかなり慣れていないので、JavaScript を使用して 10 人のランダムな Facebook の友達のプロフィール画像を HTML5 キャンバスに追加する方法を考えていました。ネット全体を検索しましたが、うまくいく解決策をまだ見つけていません。私は遊んでいて、必要な権限を持つ Facebook アプリを作成し、友人とそのプロフィール画像のリストを取得できます。それらを HTML5 キャンバスに追加する方法がわかりません。

<script>
  function loadImages(sources, callback) {
    var images = {};
    var loadedImages = 0;
    var numImages = 0;
    // get num of sources
    for(var src in sources) {
      numImages++;
    }
    for(var src in sources) {
      images[src] = new Image();
      images[src].onload = function() {
        if(++loadedImages >= numImages) {
          callback(images);
        }
      };
      images[src].src = sources[src];
    }
  }

  window.onload = function(images) {
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");

    var sources = {
      canvasbackground: "prof.jpg",
      userpic1: "https://graph.facebook.com/1645410740/picture",
      userpic2: "https://graph.facebook.com/100000557085310/picture"
    };

        loadImages(sources, function(images) {
        context.drawImage(images.canvasbackground, 0, 0, 422, 464);
        context.drawImage(images.userpic1, 33, 28, 70, 70);
        context.drawImage(images.userpic2, 130, 28, 70, 70);
    });
  };

</script>

どんな助けでも大歓迎です。

4

1 に答える 1

0

そう、まず第一に、numImages を sources.length と同じに変更してから、コールバックのために、

if( ! -- numImages ){ // once it gets down to 0, it's done, probably want to name it loadingImages
   //done 
}

コンソールログをいくつか入力して、実際に何が起こっているかを確認してください。

于 2012-11-14T18:46:18.600 に答える