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

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));旋转后ctx.translate(-(img.width - 1), -(img.height - 1)); 。

参见此处的示例： https : //developer.mozilla.org/zh-CN/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 个解决方案

解决方案1
1 已采纳 2019-04-02 15:05:37

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

问题描述

1 个解决方案

解决方案1 1 已采纳 2019-04-02 15:05:37

解决方案1
1 已采纳 2019-04-02 15:05:37