ротация изображения и холста

Question

Я пытаюсь повернуть изображение и переместить его вокруг холста с помощью клавиш со стрелками. План состоит в том, чтобы левая и правая клавиши управляли вращением изображения, а клавиша «вверх» вниз управляла движением, немного напоминающим танк!

Я могу успешно повернуть изображение вокруг центральной точки и поместить его туда, где он должен находиться на холсте, но как только я поверну его, скажем, 45 градусов, я бы хотел, чтобы клавиша «вверх» переместила ее вправо, повернула 180 и вверх по клавише перемещает его вниз по холсту и т. д. В тот момент, когда я могу поворачивать изображение, используя клавиши «влево/вправо», но клавиши вверх/вниз всегда вверх/вниз по холсту.

Мне как-то нужно повернуть координаты холста на ту же сумму, что и изображение?

Это то, что я до сих пор и в моей функции дро ..

ctx.save(); 
ctx.clearRect(0, 0, canvas.width, canvas.height); 
ctx.translate(T1.x + base_image.width/2, T1.y + base_image.height/2); 

ctx.rotate(rotation * Math.PI/180); 

ctx.translate(-(T1.x+ base_image.width/2), -(T1.y+ base_image.height/2)); 
ctx.drawImage(base_image,T1.x,T1.y); 

ctx.stroke(); 
ctx.restore() 

T1.x и T1.y являются х и у координаты изображения.

Благодаря

Answer 1

Самый быстрый способ рисовать повернуты, равномерное масштабирование изображения на Firefox, Chrome, и пограничный

// when the image has loaded add the center offsets 
image.onload = function(){ 
    // ... your code 
    this.centerX = -this.width/2; 
    this.centerY = -this.height/2; 
} 

// When rendering 
// x,y position of image center 
// scale the uniform scale 
// rotate angle in radians starting at 0 and + clockwise 
var xdx = Math.cos(rotate) * scale; 
var xdy = Math.sin(rotate) * scale; 
ctx.setTransform(xdx, xdy, -xdy, xdx, x, y); 
ctx.drawImage(image,image.centerX,image.centerY) 

выше метод с дополнительным грехом и соз и двух умножений значительно быстрее на Chrome, немного быстрее на FF, и я забыл наценку на крае, но это было быстрее, то следующего быстрого метод

ctx.setTransform(scale, 0, 0, scale, x, y); 
ctx.rotate(rotate); 
ctx.drawImage(image,image.centerX,image.centerY); 

Хотя я уезжаю холст преобразование состояния как есть. Вы можете продолжать использовать оба метода без необходимости сброса состояния холста. Когда вы закончите со всеми рендеринга затем восстановить текущее преобразование Используйте

ctx.setTransform(1,0,0,1,0,0);  

Чтобы сохранить капельку времени каждый раз, когда вы преобразовать из градусов в радианы создать константный const DEG2RAD = Math.PI/180;, то вы можете конвертировать с var radians = degrees * DEG2RAD; или сохранить набрав const D2R = Math.PI/180; или позвоните по телефону const oneDeg = Math.PI/180;

Answer 2

Наконец получил его ...

Решение было отделить вращение и движение, а не пытаться делать все это с помощью ctx.translate.

в моей функции дро называется каждый 100Гц:

ctx.save(); 
ctx.translate(T1.x + base_image.width/2, T1.y + base_image.height/2); 
ctx.rotate(rotation*Math.PI/180); 
ctx.drawImage(base_image, -base_image.width/2, -base_image.height/2); 
ctx.restore(); 
ctx.stroke(); 

левую клавишу, например:

rotation=rotation-5; 
Draw(); 

ключ вверх, например:

var radians = (rotation*Math.PI/180) 
T1.x += 4 * Math.cos(radians); 
T1.y += 4 * Math.sin(radians); 
Draw(); 

Примечание: для этого мне пришлось изменить ориентацию изображения по умолчанию на 45 град.