拼贴中的自定义图像角度

时间:2013-12-23 04:55:57

标签: javascript html5 canvas

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

我错过了什么?

2 个答案:

答案 0 :(得分: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();
}

答案 1 :(得分:1)

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

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

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

接下来,您应该使用saverestore方法。阅读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