我在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);
}
我错过了什么?
答案 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');
}
接下来,您应该使用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。