javascript - 尝试旋转图像，同时保持图片的纵横比

Question

基本上我的项目所做的就是从数据库中获取图片，将其放入 Canvas 中，移动它，放大和缩小，这一切都工作得很好。

下一步是旋转图片，我不知道我做错了什么。在图片中，我描述了访问 Canvas 时我的文档的外观。旋转图片后，它就超出了 Canvas 。我的代码如下所示，我不知道我做错了什么。谢谢

function drawRotated(degrees) {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.save();
        ctx.translate(image.width*0.15,image.height*0.15);
        ctx.rotate(degrees * Math.PI / 180);
        ctx.translate(-image.width*0.15,-image.height*0.15);
        ctx.drawImage(image, 0, 0, image.width*0.15, image.height*0.15);
}

Answer 1

也许这不是您期待的答案。我没有使用你的代码。我希望它有帮助。

主要思想是以 Canvas 原点为中心绘制图像。

window.onload = function() {
var canvas = document.getElementsByTagName('canvas')[0];
var ctx = canvas.getContext('2d');
canvas.width = 200;
canvas.height = 200;

var gkhead = gk;
gkhead.src = gk.src;
let w =  gkhead.width; 
let h =  gkhead.height; 
let x = -w/2;
let y = -h/2;  
ctx.drawImage(gkhead,x,y,w,h);


function translateToThePoint(p){
ctx.save();
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.translate(p.x,p.y);
ctx.scale(.25,.25);
ctx.drawImage(gkhead,x,y,w,h);
ctx.restore();
}
  
function rotate(angleInRad, p){
ctx.save();
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.translate(p.x,p.y);
ctx.rotate(angleInRad);
ctx.scale(.25,.25);
ctx.drawImage(gkhead,x,y,w,h);
ctx.restore();
}



let p = {x:canvas.width/2,y:canvas.height/2} 
//translateToThePoint(p); 
rotate(-Math.PI/10,p);  

}

canvas {
  border:1px solid
}

<canvas id="canvas">
  <img id="gk" src='https://www.warrenphotographic.co.uk/photography/cats/38088.jpg' />
</canvas>