캔버스 : '캔버스'로 이미지 회전

Question

회전 이미지 및 크기 조정 캔버스.

 var img = document.getElementById("i"); 
     width = img.width; 
     height = img.height; 

     canvasH.width = width; 
     canvasH.height = height; 
     ctxH.clearRect(0, 0, width, height); 
     ctxH.save(); 
     ctxH.translate(width/2, height/2); 
     ctxH.rotate(90 * Math.PI/180); 
     ctxH.translate(-(width/2), -(height/2)); 
     ctxH.drawImage(img, 0, 0); 
     ctxH.restore(); 

     var w = canvasH.width; 
// Resize canvas to meet rotated image size 
// Comment last two lines and see how image rotated 
     canvasH.width = height; 
     canvasH.height = w; 

캔버스는 회전 (크기 조정)되지만 보이는 영역 밖으로 벗어나 있습니다.

회전 된 이미지를 얻으려면 어떻게해야합니까?

뿐인 : http://jsfiddle.net/ouh5845c/1/

Answer 1

은 캔버스의 너비/높이를 변경하면 암시 적으로 캔버스를 지우고 있음을 아는 것이 중요합니다. 따라서 캔버스 크기 조정과 관련하여 수행해야하는 작업은 으로 처리 한 후 렌더링 작업을 수행하십시오. =======================

 var img = document.getElementById("i"), 
      angrad = angle * Math.PI /180, 
      sin = Math.sin(angrad), 
      cos = Math.cos(angrad); 
     width = Math.abs(img.width*cos)+Math.abs(img.height*sin); 
     height = Math.abs(img.height*cos)+Math.abs(img.width*sin); 
     console.log(img.width,img.height,width,height); 

     canvasH.width = width; 
     canvasH.height = height; 
     ctxH.clearRect(0, 0, width, height); 
     ctxH.save(); 
     ctxH.translate(width/2, height/2); 
     ctxH.rotate(angrad); 
     ctxH.translate(-img.width/2, -img.height/2); 
     ctxH.drawImage(img, 0, 0); 
     ctxH.restore(); 

http://jsfiddle.net/ouh5845c/5/

:

다음은 어떤 각도에서 근무하는 삼각법으로 올바른 접근 방식 ====

하고 다음 이야기는 잊지 수 있습니다

이제

, 당신이 회전해야하기 때문에, 폭, 높이, 회전하기 전에 회전 후 다르게 해석됩니다. 물론 각도가 90 도가 아닌 "털이 많은"상황에서는 일부 삼각법이 유용 할 것입니다.

나는이 바이올린은 당신이 필요로 무엇을 수행 믿는다

 var img = document.getElementById("i"); 
     width = img.width; 
     height = img.height; 

     canvasH.width = height; 
     canvasH.height = width; 
     ctxH.clearRect(0, 0, width, height); 
     ctxH.save(); 
     ctxH.translate(height/2, width/2); 
     ctxH.rotate(90 * Math.PI/180); 
     ctxH.translate(-width/2, -height/2); 
     ctxH.drawImage(img, 0, 0); 
     ctxH.restore(); 

http://jsfiddle.net/ouh5845c/4/

Answer 2

하면 이미지이 작동합니다 90도 회전하려는 경우.

var canvasH = document.getElementById("canvasH"), 
     ctxH = canvasH.getContext("2d"), 
     x = 0, 
     y = 0, 
     width = 0, 
     height = 0, 
     angle = 180, 
     timeOut = null; 

function loaded() { 
     var img = document.getElementById("i"); 
     canvasH.width = img.height; 
     canvasH.height = img.width; 
     ctxH.clearRect(0, 0, img.width, img.height); 
     ctxH.save(); 
     ctxH.translate(img.height, 0); 
     ctxH.rotate(1.57079633); 
     ctxH.drawImage(img, 0, 0); 
     ctxH.restore(); 
} 

jsFiddle