画布上的Javascript图像旋转

javascript image rotation on a canvas

本文关键字：图像 旋转 Javascript      更新时间：2023-09-26

我在画布上绘制图像以调整大小。我有一个问题，当我旋转图像90度时，它会奇怪地缩放。我准备了一个jFiddle来展示我所说的内容。谢谢你的帮助。http://jsfiddle.net/6ZsCz/554/

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var angleInDegrees=0;
var image=document.createElement("img");
image.onload=function(){
ctx.drawImage(image,0,0,canvas.width,canvas.height);
}
image.src="https://www.kick-flip.com/img/full/7331fa5cca3be47ce28749cba90f38f7.jpg";
$("#clockwise").click(function(){ 
angleInDegrees+=90;
drawRotated(angleInDegrees);
});
$("#counterclockwise").click(function(){ 
angleInDegrees-=90;
drawRotated(angleInDegrees);
});
ctx.save();
var MaxWidth = 150;
var MaxHeight = 200;
function drawRotated(degrees){
ctx.clearRect(0,0,MaxWidth,MaxHeight);

var temp = MaxWidth;
MaxWidth = MaxHeight;
MaxHeight = temp;
var can = $("#canvas");
can.attr("width",MaxWidth).attr("height",MaxHeight);    
ctx.translate(MaxWidth/2,MaxHeight/2);
ctx.rotate(degrees*Math.PI/180);
ctx.drawImage(image,-MaxWidth/2,-MaxHeight/2,MaxWidth,MaxHeight);
ctx.restore();
}

我已经解决了这个问题。这是一个奇怪的比例问题。我已附上工作版本

http://jsfiddle.net/6ZsCz/623/

将draw语句更新为:

if(degrees<0) var remainder = 360-(Math.abs(degrees)%360);   
else var remainder = degrees%360;
switch(remainder) {
    case 90:
    case 270:
        ctx.drawImage(image,-MaxHeight/2,-MaxWidth/2,MaxHeight,MaxWidth);
        break;
    case 0:
    case 180:
        ctx.drawImage(image,-MaxWidth/2,-MaxHeight/2,MaxWidth,MaxHeight);
        break;          
}
相关文章：