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/

但我注意到你的代码有两个奇怪的地方：

.width()而不是.width似乎很奇怪，但也许那是一个jQuery的东西？在任何情况下都应该是canvas.width。

您在代码中使用了一个名为异步的循环变量，这可能是您的问题的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';

HTML5 Canvas图像旋转与动态值和图像

1 个答案: