HTML 캔버스의 이미지가 회전하지 않습니다.

일부 이미지를 보여주고있는 웹 사이트를 만들고 있습니다. 나는 많은 웹 사이트를 통과했으며 결과가 없습니다.HTML 캔버스의 이미지가 회전하지 않습니다.

HTML :

<head></head> 
<body onload=init()> 
    <img id="imgID" src="images/buttons/panda-wall.jpg" alt="panda wall" width="100" height="100"><br></br> 
    <canvas id="myCanvas" height="400px" width="400px" style="border:1px solid"></canvas> 
    <button onclick="rotateImage()">Clear canvas</button> 
</body>

자바 스크립트 : 사전에

function init() 
{ 
    var c = document.getElementById("myCanvas"); 
    var context = c.getContext('2d'); 
    var img = document.getElementById("imgID"); 

    context.drawImage(img,0,0,c.width, c.height); 
} 

function rotateImage() 
{ 
    var c = document.getElementById("myCanvas"); 
    var context = c.getContext('2d'); 
    var img = document.getElementById("imgID"); 

    context.save(); 

    // Translate 
    context.translate(200, 200); 

    // Scale 
    context.scale(2,2); 

    // Rotate it 
    context.rotate(10*Math.PI/180); 
    context.translate(-200, -200); 
    context.drawImage(img,0,0); 

    // Finally draw the image data from the temp canvas. 
    context.restore(); 
}

감사합니다.

업데이트 : - 나는 아래의 변경 내 문제를 해결 한 :

function rotateImage() 
{ 
    var c=document.getElementById("myCanvas"); 
    var context = c.getContext('2d'); 
    var img = document.getElementById("imgID"); 

    //clear the context object rectangle. 
    context.clearRect(0, 0, c.width, c.height);    

    //Save the context object. 
    context.save(); 

    // Translate 
    context.translate(c.width/2, c.height/2); 

    // Rotate it with 90 degree 
    context.rotate(90*Math.PI/180); 

    //Translate the image on the basis of the center of the canvas. 
    context.translate(-(c.width/2), -(c.height/2)); 

    // Draw the Image. 
    context.drawImage(img,0,0, c.width,c.height); 

    // Finally draw the image data from the temp canvas. 
    context.restore();    
}

하지만 여전히 나는 큰 이미지에 대 한 내 좌표의 정확한 possition를 찾는 문제가 있어요 (예 : 폭 : 800px 및 높이 : 1280px). I는 X 및 Y 좌표 값을 얻기 위해 다음 논리를 사용하고 :

X = (Image.width/canvas.width) * current_mousePosition.X를 작은 이미지 (: 240, 높이 (400)의 폭 등)에 대한 ; Y = (Image.height/canvas.height) * current_mousePosition.Y;

그러나이 논리는 위에서 언급 한 것처럼 더 큰 이미지, 너비 및 높이에 대해 실패합니다. 누구든지 원래의 이미지와 현재 마우스 위치의 정확한 좌표를 얻기위한 논리가 무엇인지 나를 도울 수 있습니까? 모든 크기의 이미지에서 모든 기본 논리를 사용할 수 있습니까? 링크 또는 아이디어의 관점에서 어떤 도움을 크게 주시면 감사하겠습니다. 미리 감사드립니다

출처

2012-11-07 SharpUrBrain

'rotateImage()'와 'rotateCanvas()'는 어디에 정의되어 있습니까? –

HTML과 약간의 JS입니다. –

적절한 정보로 업데이트했습니다 – SharpUrBrain

img.onload 기능에 그려. 함수 rotateImage에

var clickedTimes = 1;

그리고 그것을 변경 :

출처

2012-11-08 00:25:26 simonleung

본문로드시 내 코드에서 이미지를 그리려면 Init 메서드를 호출합니다. 어쨌든 나는 context.scale (2,2); 이제 문제는 다른 것입니다. 문제는 현재 마우스 커서 x 및 y 좌표를 원래 이미지로 가져 오는 데 대한 보편적 인 논리를 얻지 못하고 있다는 것입니다. 나에게 어떤 링크 나 아이디어를 제공하도록 도와 주시겠습니까? – SharpUrBrain

추가

context.rotate(clickedTimes * 10 * Math.PI/180);

, 당신은 다른 방법으로 해결할 수 있습니다.

출처

2012-11-08 01:17:15 user1572893

context.scale (2,2)을 제거하여 문제를 해결했습니다. 이제 문제는 다른 것입니다. 문제는 현재 마우스 커서 x 및 y 좌표를 원래 이미지로 가져 오는 데 대한 보편적 인 논리를 얻지 못하고 있다는 것입니다. 대답을 얻도록 도와 주시겠습니까? – SharpUrBrain

HTML 캔버스의 이미지가 회전하지 않습니다.

답변

관련 문제