如何旋轉畫布上下文以使其完全適合畫布區域？

Question

這是一個有點蹩腳的問題，因爲我對畫布很陌生。我需要旋轉放置在畫布中的圖像，以使其完全適合畫布區域。在下面給出的代碼片段中，圖像旋轉得很好，但我不知道如何使它適合畫布矩形。我可以嘗試用數學方法與三角，但我認爲這太複雜了:)

rotating context to fit canvas area http://iconizer.net/img/temp/how-to-rotate.jpg

var imgObj=new Image(); 
imgObj.src='people.jpg'; 
var width=128;//dynamic 
var height=128;//dynamic 


$(imgObj).load(function() { 
    context.clearRect(0, 0, canvas.width, canvas.height); 

    var rad = 30 * Math.PI/180; 

    context.translate(0 + width/2, 0 + height/2); 

    context.rotate(rad); 

    //draw the image  
    context.drawImage(imgObj,width/2 * (-1),height/2 * (-1),width,height); 

    //reset the canvas 
    context.rotate(rad * (-1)); 
    context.translate((0 + width/2) * (-1), (0 + height/2) * (-1)); 
}); 

這是很容易通過簡單地將旋轉的圖像與期望的座標PHP做的，但在畫布並非如此。請幫助:)

Answer 1

自己解決了這個問題。雖然，這是有點抱怨。如果有人發現了一個更優的解決方案，這將有助於reaaaally我:)

$(document).ready(function(){ 
    var canvas=document.getElementById('iconCanvas');//<canvas id="iconCanvas" width="128" height="128"></canvas> 
    var context=canvas.getContext("2d"); 
    var imgObj=new Image(); 
    imgObj.src='/images/temp/kdmconfig.png'; 
    var iconWidth=128; 
    var iconHeight=128; 
    var width=200; 
    var height=128; 
    var angleToRotate=30; 


    $(imgObj).load(function() { 
     context.clearRect(0, 0, canvas.width, canvas.height); 

     var rad = angleToRotate * Math.PI/180; 
     var newAngle=angleToRotate; 

     //in case angle is >90 
     if(newAngle>90 && newAngle<=180){ 
      newAngle=180-newAngle; 
     } 
     else if(newAngle>180 && newAngle<=270){ 
      newAngle=270-newAngle; 
     } 
     else if(newAngle>270){ 
      newAngle=360-newAngle; 
     } 

     context.translate(0 + iconWidth/2, 0 + iconWidth/2); 

     context.rotate(rad); 

     //draw the image 

     if(width>height){ 
      var newImageHeight=Math.round((Math.cos((Math.atan(iconWidth/iconHeight)*180/Math.PI)*Math.PI/180)*height)/Math.sin((parseInt(90-newAngle)+Math.atan(iconWidth/iconHeight)*180/Math.PI)*Math.PI/180)); 

      var newImageWidth=Math.round(newImageHeight*iconWidth/iconHeight); 
     } 
     else{ 
      var newImageWidth=Math.round((Math.cos((Math.atan(iconHeight/iconWidth)*180/Math.PI)*Math.PI/180)*width)/Math.sin((parseInt(90-newAngle)+Math.atan(iconHeight/iconWidth)*180/Math.PI)*Math.PI/180)); 

      var newImageHeight=Math.round(newImageWidth*iconHeight/iconWidth); 
     } 


     context.drawImage(imgObj,newImageWidth/2 * (-1),newImageHeight/2 * (-1),newImageWidth,newImageHeight); 

    }); 
    }); 

Answer 2

這是你在找什麼：

var newCanvas = document.createElement('canvas'); 
newCanvas.height="175"; 
newCanvas.width="175"; 
newCanvas.style.border="1px solid black"; 
document.body.appendChild(newCanvas); 

var imgObj=new Image(); 
imgObj.src='people.jpg'; 
var width=imgObj.width; 
var height=imgObj.height; 

var angleToRotate = 30 * Math.PI/180; 

var requiredCanvasHeight = Math.sin(angleToRotate)*width+Math.cos(angleToRotate)*height; 
var requiredCanvasWidth = Math.sin(angleToRotate)*height+Math.cos(angleToRotate)*width; 
newCanvas.height=Math.ceil(requiredCanvasHeight); 
newCanvas.width=Math.ceil(requiredCanvasWidth); 

$(imgObj).load(function() { 
    var context = newCanvas.getContext('2d'); 

    context.clearRect(0, 0, newCanvas.width, newCanvas.height); 

    context.translate(0 + width/2, 0);// + height/2); 

    context.rotate(angleToRotate); 

    //draw the image  
    context.drawImage(imgObj, 0, 0, width, height); 

    //reset the canvas 
    context.rotate(rad * (-1)); 
    context.translate((0 + width/2) * (-1), (0 + height/2) * (-1)); 
}); 

你不必彌補的drawImage方法調用中的圖像。