HTML Canvas中的圖像未旋轉

Question

我正在創建一個網站，其中正在顯示一些圖像。 我瀏覽了許多網站，但沒有結果。

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>

JavaScript：

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();               
}

但是，對於較大的圖像（例如，寬度：800px和高度：1280px），我仍然找不到確切的坐標位置。 對於小圖像（例如，寬度：240和高度：400），我使用以下邏輯獲取X和Y坐標值：

X =（圖像寬度/畫布寬度）* current_mousePosition.X; Y =（Image.height / canvas.height）* current_mousePosition.Y;

但如上所述，對於較大的圖像，寬度和高度，此邏輯將失敗。 誰能幫我獲得與原始圖像相對應的當前鼠標位置的精確坐標的邏輯是什么。 所有尺寸的圖像都可以使用默認邏輯嗎？ 任何幫助，無論是在鏈接還是思想上，都將不勝感激。 提前致謝

Answer 1

在img.onload函數中繪制它。

Answer 2

加：

var clickedTimes = 1;

並在您的函數rotateImage對其進行了更改：

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

並且，您可以使用其他方法解決它。

HTML Canvas中的圖像未旋轉

問題描述

2 個解決方案

解決方案1
0 2012-11-08 00:25:26

解決方案2
0 2012-11-08 01:17:15

HTML Canvas中的圖像未旋轉

問題描述

2 個解決方案

解決方案1 0 2012-11-08 00:25:26

解決方案2 0 2012-11-08 01:17:15

解決方案1
0 2012-11-08 00:25:26

解決方案2
0 2012-11-08 01:17:15