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/

但我确实注意到您的代码有两件奇怪的事情：

  1. .width()并不.width奇怪，但也许那是一个 jQuery 的东西？无论如何都应该canvas.width如此。

  2. 您在代码中使用了一个名为 asynchronously 的循环变量，这 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 回答