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