时间戳

首页 > 解决方案 > 如何让我的画布图像每次旋转 90 度，它只旋转 180 度

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

问题描述

我试图让我的图像在你点击它时旋转 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>

标签： javascriptjqueryhtmlimagecanvas

解决方案

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

推荐阅读