How do I get my canvas image to rotate 90 degrees each time, its only rotating 180 degrees
Question
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?
<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 answers
solution1
1 ACCPTED 2019-04-02 15:05:37
Math.PI rotates by 180°. n * Math.PI / 180 rotates by n °. So in your case, you need to call 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); after the rotation with 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
Example:
// Rotation by 90° around center at 150,75
ctx.translate(150, 75);
ctx.rotate(Math.PI / 2);
ctx.translate(-150, -75);
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.