Question

我在HTML5画布上制作拼贴画。但是，我发现难以以不同的角度排列图像。我想以PI / 4的角度安排第一张图片，另一张角度为-PI / 70。这是问题所在的jsFiddle。

    var pic1 = new Image();
    pic1.src = "http://www.fantom-xp.com/wallpapers/23/Windows_7_-_Swan.jpg";
    context.translate(170,170);
    context.rotate(Math.PI/8);
    pic1.onload = function(){
        context.drawImage(pic1, 20, 20, 200, 200);
    }

    var pic2 = new Image();
    pic2.src = "http://www.redorbit.com/media/uploads/2004/10/38_ec8164eb3e4bddf76ef1b8eb564b9514.jpg";
    context.translate(100,10);
    context.rotate(-Math.PI/70);
    pic2.onload = function(){
        context.drawImage(pic2, 0, 0, 200, 200);
    }

我错过了什么？

Answer 1

假设您想围绕中心点旋转图像，则需要使用此drawImage：

context.drawImage(image, -image.width/2, -image.height/2).

那是因为翻译点成为旋转点。

这是一个通用的图像旋转功能：

function tiltedPicture(centerX,centerY,degreeAngle,image){
    ctx.save();
    ctx.translate(centerX,centerY);
    ctx.rotate(degreeAngle*Math.PI/180);
    ctx.drawImage(image,-image.width/2,-image.height/2);
    ctx.restore();
}

Answer 2

您的代码中存在一些问题。

首先，无法加载您的第一张图片。添加时会看到它：

pic1.onerror = function() {
    console.log('Error loading');
}

接下来，您应该使用save和restore方法。阅读here。

问题是，当您拨打两次context.translate(170,170);时，您将在x: 340, y: 340处获得最终翻译。如果您将组合更复杂的变换，您可能会得到难以预测的结果。幸运的是有方法保存和恢复。 Save - 保存当前转换状态，Restore - 恢复上次保存的状态。

在您的案例中使用（对于第一张图片）：

pic1.onload = function(){
    context.save();
    context.translate(170,170);
    context.rotate(Math.PI/2);
    context.drawImage(pic1, 20, 20, 200, 200);
    context.restore();
}
pic1.onerror = function() {
    console.log('error loading');
}

请参阅demo。

拼贴中的自定义图像角度

2 个答案: