2 차원 html5Canvas 및 ctx.rotate 함수를 사용하여 객체를 방향으로 이동합니다.

Question

제목 유형은 모두 다 명시된대로 객체를 앞으로 이동하려고합니다.

xView = this.x-this.width/2; 
yView = this.y-this.height/2; 
playerCtx.drawImage(imgSprite, 0, 0, this.width, this.height, xView, yView, this.width, this.height); 
     playerCtx.save();  
     playerCtx.clearRect(0, 0, game.width, game.height); 
     playerCtx.translate(xView, yView); 
     playerCtx.rotate(angle *Math.PI/180); 
     playerCtx.drawImage(imgSprite, 0, 0, this.width, this.height, -xView, -yView, this.width, this.height); 
     playerCtx.restore(); 
    } 
     if(Game.controls.left) { 
    angle-=1; 
     if(Game.controls.up){ 
     this.x += this.speed * Math.cos(angle * Math.PI/180); 
     this.y -= this.speed * Math.sin(angle * Math.PI/180); 
     } 

개체가 var angle에 해당하는 이동하지 않습니다

여기 내 관련 코드입니다.

편집 내 코드는 그래서 대신에 36 개 다른 각도를 포함하는 스프라이트 시트를 사용하여 작동하지 않는 이유를 알아낼 수 없었다

. 이 작동하지만 회전이 너무 빠릅니다. 사람이 말해 줄 수 있다면 왜 이상 제대로 작동하지 않는, 또는 어떻게 느린 다음과 같은 기능이 이동하고 가겠어요 :

나는 왼쪽 키를 누르고 있으면 의미 느리게함으로써

if(Game.controls.right) { 
    currentFrame++; 
    angle+=10; 
} 

, angle+10; currentFrame++;가 제기하다 빠르며 더 추가합니다. 프레임이 너무 오래 걸릴 수 있습니다. '개체가 오른쪽에 직면하는 경우 예를 들어 내 원래의 질문에, 회전과 각도 변수 이동에 대한 Jfiddle

편집

추가에게, 각도는 90과 동일하지만, 객체는 여전히 아무튼 카메라가 보이더라도 오른쪽으로 움직이는 것처럼 보입니다.

this.x += this.speed * Math.cos(angle * Math.PI/180); 
this.y += this.speed * Math.sin(angle * Math.PI/180); 

당신이 단계를 줄일 기본적으로뿐만 아니라 더 스프라이트를 제공해야합니다 (질문의 편집 된 부분에) 당신의 회전을 만들려면 :