I press rot and the image crawls off somewhere and rotates not 90 degrees but more

var img; var tttScale = 1; var tttRotate = 1; var canvas = document.getElementById('canvas'), ctx = canvas.getContext('2d'); function draw() { var ctx = document.getElementById('canvas').getContext('2d'); img = new Image(); var f = document.getElementById("uploadimage").files[0], url = window.zURL || window.URL, src = url.createObjectURL(f); img.src = src; img.onload = function() { ctx.scale((canvas.width / img.width), (canvas.width / img.width)); // ctx.rotate(20*Math.PI/180); ctx.drawImage(img, 0, 0, img.width, img.height); }; }; document.getElementById("uploadimage").addEventListener("change", draw, false) function Move(a) { switch (a) { case 'plus': if (tttScale < 1) { tttScale = 1; } tttScale = tttScale + 0.05; break; case 'mines': if (tttScale > 1) { tttScale = 1; } case 'rot': tttRotate = tttRotate + 90; break; default: tttScale = 1; } var ctx = document.getElementById('canvas').getContext('2d'); ctx.clearRect(0, 0, img.width, img.height); //ctx.scale(tttScale, tttScale); ctx.translate(canvas.width, canvas.height); ctx.rotate(tttRotate * Math.PI / 180); ctx.drawImage(img, 0, 0, img.width, img.height); // alert(tttScale); } function doCanvas() { ctx.fillStyle = '#FF8F00'; ctx.fillRect(0, 0, 500, 500); ctx.fillStyle = '#fff'; ctx.clearRect(0, 0, 500, 500); //alert("111"); }; 
 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body onload="doCanvas()"> <input type="file" name="img" id="uploadimage"> <a href="javascript:void(0)" onclick="Move('mines')" target="_self" id="a_33ff_4">Minus</a> <a href="javascript:void(0)" onclick="Move('plus')">Plus</a> <a href="javascript:void(0)" onclick="Move('rot')">rot</a> </br> <canvas id="canvas" width="500" height="500" ;></canvas> <script src="config.js"></script> </body> </html>

    1 answer 1

    This is due to the fact that the rotation occurs around the center of rotation, which must be installed in the center of your canvas. Something like this:

     var img; var tttScale = 1; var tttRotate = 0; var canvas = document.getElementById('canvas'), ctx = canvas.getContext('2d'); function draw() { var ctx = document.getElementById('canvas').getContext('2d'); img = new Image(); var f = document.getElementById("uploadimage").files[0], url = window.zURL || window.URL, src = url.createObjectURL(f); img.src = src; img.onload = function() { ctx.scale((canvas.width / img.width), (canvas.width / img.width)); ctx.drawImage(img, 0, 0, img.width, img.height); }; }; document.getElementById("uploadimage").addEventListener("change", draw, false) window.Move = function(a) { tttRotate += 90/57.2958;; //ctx = document.getElementById('canvas').getContext('2d'); var x = img.width / 2; var y = img.width / 2; var width = img.width; var height = img.height; ctx.clearRect(0, 0, width, height); ctx.translate(x, y); ctx.rotate(tttRotate); ctx.drawImage(img, -width / 2, -height / 2, width, height); ctx.rotate(-tttRotate); ctx.translate(-x, -y); } function doCanvas() { ctx.fillStyle = '#FF8F00'; ctx.fillRect(0, 0, 500, 500); ctx.fillStyle = '#fff'; ctx.clearRect(0, 0, 500, 500); }; 
      <div> <input type="file" name="img" id="uploadimage"> <a onClick="Move('rot')">rot</a> </div> <canvas id="canvas" width="500" height="500" ;></canvas>