Башня обороны повернуть объект

Question

Я работаю над школьным проектом в JavaScript. (Tower Defense).

Я пытаюсь повернуть танк в координатах X / Y. Но у меня проблемы с функцией поворота (90 °).

function preloadAssets(){
    this.Menu = new Image();
    this.Menu.src = "C:/Users/Filip/Desktop/JS/background/menu.png";
    this.background = new Image();
    this.background.src="../Background/background.png";
    this.tigerImg = new Image();
    this.tigerImg.src = "C:/Users/Filip/Desktop/JS/background/tiger_e.png";
}



function tiger(){
    this.x = 0;
    this.y = 230;
    this.angle = 0;
    this.moveangle = 5;
    this.display = function(){ //function to display the tank

        playArea.context.drawImage(tigerImg,this.x,this.y,500,250);
    }
    this.move = function(){ //function to move the tank


        if (this.x + tx > 1900){
            tx = 0;
        }
        if (this.x + tx >= 1890){
            this.y -= ty;
        }   
        this.x += tx;

    }

}


function redraw(){
    playArea.clearCanvas();
    tiger.move();
    drawBackground();
}

Я думал о чем-то вроде добавления этого в функцию перемещения:

this.angle += this.moveangle;
rotate(this.angle);
if(this.angle == 90){
   this.moveangle = 0;
}

Answer 1

Это заставило его работать (анимированный)

this.rotate = function(){
        playArea.context.save();
        playArea.context.translate(this.x + (this.width / 2), this.y + (this.height / 2));
        playArea.context.rotate(this.angle * Math.PI / 180);
        this.angle += this.moveangle;
        playArea.context.drawImage(tigerImg,(-this.width) / 2,(-this.height) / 2,500,250);
        playArea.context.restore();
    }

Answer 2

Это очень просто.

var img=document.getElementById('TankID');
img.setAttribute('style','transform:rotate(90deg)');