如何让我的画布图像每次旋转 90 度，它只旋转 180 度答案

【问题标题】：How do I get my canvas image to rotate 90 degrees each time, its only rotating 180 degrees如何让我的画布图像每次旋转 90 度，它只旋转 180 度
【发布时间】：2019-08-23 22:13:33
【问题描述】：

我试图让我的图像在你点击它时旋转 90 度，但它只旋转 180 度，我如何让它每次点击它时移动 90 度？

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
  <title>Flipping photo in a canvas tag</title>
  <style>
    #canvas {cursor: pointer;}

       canvas {
    height: 50vh;    

    }  


    </style>
</head>
<body>  



<label>Image File:</label>
<br/>
<input type="file" id="imageLoader" name="imageLoader" />

<h1>Example of using <code>&lt;canvas&gt;</code></h1>

<p>This example shows how a photo is loaded in a <code>&lt;canvas&gt;</code> tag and then flipped.</p>

<p>Click on the photo to flip (provided, of course, that your browser supports <code>&lt;canvas&gt;</code>)</p>

<canvas id="canvas" style="border:1px red solid;"></canvas>

<a download="new-image.png" id="download">Download</a>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

    <script type="text/javascript">




var imageLoader = document.getElementById('imageLoader');
imageLoader.addEventListener('change', handleImage, false);


var can = document.getElementById('canvas');
var ctx = can.getContext('2d');




var img = new Image();


function handleImage(e) {
  var reader = new FileReader();
  reader.onload = function(event) {

    img.onload = function() {
      can.width = img.width;
      can.height = img.height;
      ctx.drawImage(img, 0, 0, img.width, img.height);
      ctx.save();
    }
    img.src = event.target.result;
  }
  reader.readAsDataURL(e.target.files[0]);
}




can.onclick = function() {
  console.log('here');
  ctx.translate(img.width - 1, img.height - 1);
  ctx.rotate(Math.PI);
  ctx.drawImage(img, 0, 0, img.width, img.height);

  var button = document.getElementById('download');
  button.setAttribute( 'href', can.toDataURL('image/png', 1) );

};    



    </script>


    <p><a href="http://www.phpied.com/photo-canvas-tag-flip/">Blog post is here</a></p>

</body>
</html>

【问题讨论】：

这里只是猜测，但也许ctx.rotate(Math.PI/2);会这样做？
我试过了，但没有反应
“不响应”是什么意思？图片没有更新？
当我将其更改为 ctx.rotate(Math.PI/2) 时它不再旋转
HTML5 Canvas Rotate Image的可能重复

标签： javascript jquery html image canvas

【解决方案1】：

Math.PI 旋转 180°。 n * Math.PI / 180 旋转 n°。所以在你的情况下，你需要打电话给ctx.rotate(Math.PI/2)。

您的代码存在问题：您一直在移动旋转中心。因此，当您第二次旋转时，该中心已经远离原点。您现在平移这个（移动的）点，旋转它然后绘制。现在，您的新图像很可能在画布之外。

所以你需要在使用ctx.translate(-(img.width - 1), -(img.height - 1)); 旋转后撤消ctx.translate(img.width - 1, img.height - 1);。

查看示例：https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/rotate#Rotating_a_shape_around_its_center

例子：

// Rotation by 90° around center at 150,75
ctx.translate(150, 75);
ctx.rotate(Math.PI / 2);
ctx.translate(-150, -75);

【讨论】：

我更改了它，但它现在不旋转 ///////////////// can.onclick = function() { console.log('here '); ctx.translate(-(img.width - 1), -(img.height - 1)); ctx.rotate(Math.PI/2); ctx.drawImage(img, 0, 0, img.width, img.height); var button = document.getElementById('download'); button.setAttribute('href', can.toDataURL('image/png', 1) ); };
您在哪里撤消翻译？
我改变了 ctx.translate(img.width - 1, img.height - 1);与 ctx.translate(-(img.width - 1), -(img.height - 1)); jsfiddle.net/tud34n5s
我说“撤消......旋转后”。请参阅我链接到的示例
好的，我把它放在后面，但它不会旋转任何东西jsfiddle.net/yL0odnhf/1