Javascript 拼贴中的自定义图像角度

我正在

HTML5

canvas中制作拼贴。然而，我发现很难从不同角度排列图像。我想把第一张照片安排在PI/4的角度，另一张照片安排在PI/70的角度。这是问题的症结所在

    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);
    }

---

我遗漏了什么？

假设要围绕图像的中心点旋转图像，则需要使用此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();
}

---

您的代码中存在一些问题

首先，无法加载您的第一个图像。您将在添加以下内容时看到：

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

接下来，您应该使用

save

和

restore

方法。阅读

问题是当您调用两次

context.translate（170170）

您将在

x:340，y:340

获得最终翻译。若你们将更复杂的转换结合起来，你们可能会得到难以预测的结果。幸运的是，有保存和恢复的方法<代码>保存-保存当前转换状态，

还原

-还原上次保存的状态

在您的情况下使用（对于第一张图片）：

---

请参阅。

太好了，只需在load event handler中绘制图像，然后使用

save

和

restore

。请看我的最新答案。没有评论的downvode不能被欣赏！

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