Question

我试图让我的图像在单击时旋转90个dreges，但它只能旋转180个dreges，我如何使它在每次单击时都旋转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>

Answer 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);

如何使我的画布图像每次旋转90度，它只能旋转180度

1 个答案: