与动态值和图像HTML5画布图像旋转

Question

我有下面的代码 -

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'量的图像添加到画布（这恰好是树）我想旋转图像随机数量的弧度。目前只是让它工作，我已经设置了这个数字，而不是随机生成弧度。

如果我不尝试旋转图像，我成功地获取了循环中随机放置在画布中的所有图像。当我尝试旋转时，我只是在没有旋转的情况下将所有图像放在同一个地方。

任何人都可以点我在正确的方向，我的搜索只留给我感到沮丧，因为我“的出现”被做正确（显然我不是！）

Answer 1

在快速测试这里有没有似乎是一个问题：http://jsfiddle.net/ZZ7MQ/

但我注意到你的代码中有两处奇怪的事情：

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';