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 =（Image.width / canvas.width）* 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 个答案: