0

私は次のコードを持っています -

for(var i = 0; i < treesLength; i++){
    var tmpTree = trees[i];
    tmpTreeX = 1+Math.random()*($("#gameBoard").width()-95);
    tmpTreeY = 1+Math.random()*($("#gameBoard").height()-90);
    var imgTreeFile = new Image();
    imgTreeFile.onload = function() {
        context.save();
        context.translate(tmpTreeX,tmpTreeY);
        context.rotate(47 * Math.PI / 180);
        context.translate(-tmpTreeX,-tmpTreeY);
        context.drawImage(imgTreeFile, tmpTreeX, tmpTreeY);
        context.restore();
    };
    imgTreeFile.src = 'img/tree.png';
}

私が達成しようとして'n'いるのは、キャンバスに大量の画像を追加することです(たまたま木です)。画像をランダムな量のラジアンで回転させたいです。現在、それを機能させるために、ラジアンをランダムに生成するのではなく、この数値を設定しました。

画像を回転させようとしないと、キャンバス全体にランダムに配置されたループ内のすべての画像を正常に取得できます。回転しようとすると、すべての画像が回転せずに同じ場所に表示されます。

誰かが私を正しい方向に向けることができますか?私の検索は、私がそれを正しく行っているように「見える」ので、私をイライラさせただけです(明らかにそうではありません!)

4

1 に答える 1

1

ここでの簡単なテストでは、問題はないようです: http://jsfiddle.net/ZZ7MQ/

しかし、あなたのコードについて 2 つの奇妙な点に気付きました。

  1. .width()奇妙に思えません.widthが、それはjQueryのことでしょうか? canvas.widthいずれにせよそうあるべきです。

  2. コード内で非同期に呼び出されるループ変数を使用しています。これは 99% の可能性が高い問題です。ループが発生する前にすべての画像が読み込まれるように、コードをリファクタリングすることを強くお勧めします。それらがすべて同じ画像である場合、これは非常に簡単になります。

    var imgTreeFile = new Image();
imgTreeFile.onload = function() {
for(var i = 0; i < treesLength; i++){
    var tmpTree = trees[i];
    tmpTreeX = 1+Math.random()*($("#gameBoard").width()-95);
    tmpTreeY = 1+Math.random()*($("#gameBoard").height()-90);
    context.save();
    context.translate(tmpTreeX,tmpTreeY);
    context.rotate(47 * Math.PI / 180);
    context.translate(-tmpTreeX,-tmpTreeY);
    context.drawImage(imgTreeFile, tmpTreeX, tmpTreeY);
    context.restore();
  }
};
imgTreeFile.src = 'img/tree.png';
于 2012-11-28T03:37:34.650 に答える