如何使我的画布图像每次旋转90度，它只能旋转180度
[英]How do I get my canvas image to rotate 90 degrees each time, its only rotating 180 degrees
问题描述
im trying to get my image rotate 90 dregees when you click on it, but it only rotates 180 dregees, how do i get it to move 90 degrees each time you click on it? 
我试图让我的图像在单击时旋转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><canvas></code></h1> <p>This example shows how a photo is loaded in a <code><canvas></code> tag and then flipped.</p> <p>Click on the photo to flip (provided, of course, that your browser supports <code><canvas></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>
1 个解决方案
解决方案1
1 已采纳 2019-04-02 15:05:37
Math.PI rotates by 180°. Math.PI旋转180°。 n * Math.PI / 180 rotates by n °. n * Math.PI / 180旋转n °。 So in your case, you need to call ctx.rotate(Math.PI/2) . 因此，在您的情况下，您需要调用ctx.rotate(Math.PI/2) 。
And there is a problem with your code: You're moving the center of rotation all the time. 您的代码有一个问题：您一直在移动旋转中心。 So when you rotate the second time, that center is already somewhere away from the origin. 因此，当您第二次旋转时，该中心已经远离原点。 You now translate this (moved) point, rotate it and then draw. 现在，您平移（移动）该点，旋转它，然后绘制。 Most likely, your new image is outside the canvas, now. 现在，您的新图像很可能在画布之外。
So you need to undo the ctx.translate(img.width - 1, img.height - 1); 因此，您需要撤消ctx.translate(img.width - 1, img.height - 1); after the rotation with ctx.translate(-(img.width - 1), -(img.height - 1)); 用ctx.translate(-(img.width - 1), -(img.height - 1));旋转后ctx.translate(-(img.width - 1), -(img.height - 1)); . 。
See here for an example: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/rotate#Rotating_a_shape_around_its_center 参见此处的示例： https : //developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/rotate#Rotating_a_shape_around_its_center
Example: 例：
// Rotation by 90° around center at 150,75
ctx.translate(150, 75);
ctx.rotate(Math.PI / 2);
ctx.translate(-150, -75);
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.