как рассчитывать точку поворота ctx.translate()?

427

28 ноября 2016, 18:32

почему картитка поворачивается как то не вокруг центра

var img; 
var tttAlt = 0; 
var tttLong = 0; 
var tttScale = 0; 
 
function draw() { //upload 
  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.drawImage(img, 0, 0, img.width, img.height, 0, 0, canvas.width, (img.height * canvas.width) / img.width); //вписывание в ширину 
  }; 
}; 
document.getElementById("uploadimage").addEventListener("change", draw, false) 
 
function turn() { 
  var ctx = document.getElementById('canvas').getContext('2d'); 
  ctx.rotate(Math.PI / 2); 
  var rectX = canvas.width / 2, 
    rectY = canvas.height / 2; 
 
  ctx.translate(-0, -500); 
  ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, canvas.width, (img.height * canvas.width) / img.width); //вписывание в ширину 
}

<button onclick="turn()">turn</button> 
 
 
<input type="file" name="img" id="uploadimage" size="1" class="input_input_style"> 
 
<body style="background-color:3F6E6F;"> 
  <canvas id="canvas" width="500" height="500"></canvas> 
 
  <script src="config.js"></script>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Как уменьшить видимый размер canvas

У меня в canvas 1000*1000 рисуется картинка, а потом сохраняется на компьютерcanvas 1000*1000 не красиво смотрится на экране, а если его уменьшить до 300*300...

433

HTML