Javascript 我已经拍摄了一张图片，并将其放在画布上制作成我的游戏，但我赢了'；我不能正常旋转

我已经拍摄了一张图片，并把它放在画布上放进我的游戏中，但我无法让它正确旋转。我很抱歉，如果我的代码不是很有条理，只是有点匆忙。问题在于组件功能。谢谢你的帮助

var myGamePiece;

function startGame() {
    myGamePiece = new component(40, 40, "character.png", 300, 300, "image");
    myGameArea.start();
}

var myGameArea = {
    canvas: document.createElement("canvas")
    , start: function () {
        this.canvas.width = 640;
        this.canvas.height = 480;
        this.context = this.canvas.getContext("2d");
        document.body.insertBefore(this.canvas, document.body.childNodes[0]);
        this.frameNo = 0;
        this.interval = setInterval(updateGameArea, 20);
        window.addEventListener('keydown', function (e) {
            e.preventDefault();
            myGameArea.keys = (myGameArea.keys || []);
            myGameArea.keys[e.keyCode] = (e.type == "keydown");
        })
        window.addEventListener('keyup', function (e) {
            myGameArea.keys[e.keyCode] = (e.type == "keydown");
        })
    }
    , stop: function () {
        clearInterval(this.interval);
    }
    , clear: function () {
        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
    }
}

function component(width, height, color, x, y, type) {

    this.type = type;
    if (type == "image") {
        this.image = new Image();
        this.image.src = color;
    }
    this.width = width;
    this.height = height;
    this.speed = 0;
    this.angle = 0;
    this.moveAngle = 0;
    this.x = x;
    this.y = y;
    this.update = function () {
        ctx = myGameArea.context;
        if (type == "image") {

            ctx.save();
            ctx.rotate(this.angle);
            ctx.drawImage(this.image, this.x, this.y, this.width, this.height);
            ctx.restore();
        } else {
            ctx.save();
            ctx.translate(this.x, this.y);

            ctx.fillStyle = color;
            ctx.fillRect(this.width / -2, this.height / -2, this.width, this.height);
        }


    }


    this.newPos = function () {
        this.angle += this.moveAngle * Math.PI / 180;
        this.x += this.speed * Math.sin(this.angle);
        this.y -= this.speed * Math.cos(this.angle);
    }

    this.hitBottom = function () {
        var bottom = myGameArea.canvas.height - 20;
        if (this.y > bottom) {
            this.y = this.y - 2.5;
        }
    }

    this.hitTop = function () {

        if (this.y < 20) {
            this.y = this.y + 2.5;
        }
    }

    this.hitLeft = function () {

        if (this.x < 20) {
            this.x = this.x + 2.5;
        }
    }

    this.hitRight = function () {
        var side = myGameArea.canvas.width - 20;
        if (this.x > side) {
            this.x = this.x - 2.5;
        }
    }


}

function updateGameArea() {
    myGameArea.clear();
    myGamePiece.moveAngle = 0;
    myGamePiece.speed = 0;
    if (myGameArea.keys && myGameArea.keys[37]) {
        myGamePiece.moveAngle = -2.5;
    }
    if (myGameArea.keys && myGameArea.keys[39]) {
        myGamePiece.moveAngle = 2.5;
    }
    if (myGameArea.keys && myGameArea.keys[38]) {
        myGamePiece.speed = 2.5;
    }
    if (myGameArea.keys && myGameArea.keys[40]) {
        myGamePiece.speed = -1;
    }
    myGamePiece.newPos();
    myGamePiece.update();
    myGamePiece.hitBottom();
    myGamePiece.hitTop();
    myGamePiece.hitLeft();
    myGamePiece.hitRight();
}

var-myGamePiece；
函数startName（）{
myGamePiece=新组件（40,40，“character.png”，300300，“image”）；
myGameArea.start（）；
}
var myGameArea={
画布：document.createElement（“画布”）
，开始：函数（）{
this.canvas.width=640；
this.canvas.height=480；
this.context=this.canvas.getContext（“2d”）；
document.body.insertBefore（this.canvas，document.body.childNodes[0]）；
这个.frameNo=0；
this.interval=setInterval（updateGameArea，20）；
window.addEventListener（'keydown'，函数（e）{
e、 预防默认值（）；
myGameArea.keys=（myGameArea.keys | | |[]）；
myGameArea.keys[e.keyCode]=（e.type==“keydown”）；
})
window.addEventListener（'keyup'，函数（e）{
myGameArea.keys[e.keyCode]=（e.type==“keydown”）；
})
}
，停止：函数（）{
clearInterval（这个.interval）；
}
，清除：函数（）{
this.context.clearRect（0，0，this.canvas.width，this.canvas.height）；
}
}
功能组件（宽度、高度、颜色、x、y、类型）{
this.type=type；
如果（类型==“图像”）{
this.image=新图像（）；
this.image.src=颜色；
}
这个。宽度=宽度；
高度=高度；
这个速度=0；
这个角度=0；
此.moveAngle=0；
这个.x=x；
这个。y=y；
this.update=函数（）{
ctx=myGameArea.context；
如果（类型==“图像”）{
ctx.save（）；
ctx.旋转（此角度）；
ctx.drawImage（this.image，this.x，this.y，this.width，this.height）；
ctx.restore（）；
}否则{
ctx.save（）；
ctx.translate（this.x，this.y）；
ctx.fillStyle=颜色；
ctx.fillRect（this.width/-2，this.height/-2，this.width，this.height）；
}
}
this.newPos=函数（）{
this.angle+=this.moveAngle*Math.PI/180；
this.x+=this.speed*Math.sin（this.angle）；
this.y-=this.speed*Math.cos（this.angle）；
}
this.hitbooth=函数（）{
var bottom=myGameArea.canvas.height-20；
如果（此.y>底部）{
this.y=this.y-2.5；
}
}
this.hitTop=函数（）{
如果（该.y<20）{
this.y=this.y+2.5；
}
}
this.hitLeft=函数（）{
如果（此.x<20）{
这个.x=这个.x+2.5；
}
}
this.hitRight=函数（）{
var side=myGameArea.canvas.width-20；
如果（此.x>侧）{
this.x=this.x-2.5；
}
}
}
函数updateGameArea（）{
myGameArea.clear（）；
myGamePiece.moveAngle=0；
myGamePiece.speed=0；
if（myGameArea.keys&&myGameArea.keys[37]）{
myGamePiece.moveAngle=-2.5；
}
if（myGameArea.keys&&myGameArea.keys[39]）{
myGamePiece.moveAngle=2.5；
}
if（myGameArea.keys&&myGameArea.keys[38]）{
myGamePiece.speed=2.5；
}
if（myGameArea.keys&&myGameArea.keys[40]）{
myGamePiece.speed=-1；
}
myGamePiece.newPos（）；
myGamePiece.update（）；
myGamePiece.hitboottom（）；
myGamePiece.hitTop（）；
myGamePiece.hitlight（）；
myGamePiece.hittright（）；
}

无需保存和还原。当按下左键和右键（37、39）而不进行保存和还原时，对象开始失去控制。按下左键和右键时，对象开始失去控制（37、39）