标题样的说，这一切，我试图向前移动对象取决于角度是伟大的。 以下是我的相关codeS：

The title kind of says it all, I am trying to move an object forward depending on the angle it is at. Here are my relevant codes:

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);
        }

对象不动相应的无功角。 修改 我无法弄清楚，为什么我的code没有工作，所以我代替使用含有36种不同的角度一个精灵表。这工作，但旋转太快。如果有人能告诉我为什么上面的工作不正常，或者我怎么会去作如下函数去慢：

The object doesn't move corresponding to the var angle. EDIT I couldn't figure out why my code wasn't working so I instead used a sprite sheet containing 36 different angles. This works, however the rotation is too fast. If anyone could tell me why the above isn't working properly, or how I would go about making the following function go slower:

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

通过慢我的意思是，当左键不放，角+ 10; currentFrame ++; 正在募集快，并增加更多的帧可能会花很长时间 修改 http://jsfiddle.net/p5hn6/1/ 增加了Jfiddle我原来的问题，角度可变的移动与旋转，对于一个例子，如果对象是朝右，角度将等于90，但对象仍然看起来并不像它向右移动，虽然摄像头呢

By slower I mean when the left key is held down, angle+10; currentFrame++; are raising to fast, and adding more Frames may take too long. EDIT http://jsfiddle.net/p5hn6/1/ Added a Jfiddle for my original question, the angle variable moves with the rotation, for an example if the object is facing Right, angle will equal 90, but the object still doesn't look like its moving to the right, although the camera does.

推荐答案

尝试和改变周围的COS和罪恶的标志：

Try to change cos and sin around as well as the sign:

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

为了让您的旋转（在这个问题的编辑部分），你需要减少的步骤基本上同时为客户提供更多的精灵。更多的精灵不会慢，但会使用更多的内存，并增加初始加载时间一点点。

To make your rotation (in the edited part of the question) you need to reduce the steps basically as well as provide more sprites. More sprites won't be slower but will use more memory and increase initial load time a tad.

更新

好了，还有你需要纠正的几件事（以上就是其中之一，他们在小提琴的修正）。

Ok, there are a few things you need to correct (the above is one of them and they are corrected in the fiddle).

看到这里修改小提琴

See modified fiddle here

其他的事情都是：

在你的更新功能：

    /// Add both here as angle with correctly use neg/pos
    if (Game.controls.up) {
        this.x += this.speed * Math.cos(angle * Math.PI / 180);
        this.y += this.speed * Math.sin(angle * Math.PI / 180);
    }

    /// Sub both here as angle with correctly use neg/pos
    if (Game.controls.down) {
        this.x -= this.speed * Math.cos(angle * Math.PI / 180);
        this.y -= this.speed * Math.sin(angle * Math.PI / 180);
    }

由于角度将决定你只需要增加或根据意向减，所以加起来两个值，换下来减去这两个值的正面或负面的价值。该角度将确保增量正确进行了签名。

As the angle will determine the negative or positive value you just need to add or subtract depending on the intention, so for up add both values, for down subtract both value. The angle will make sure the delta is correctly signed.

在你的画功能也有几件事情：

In your draw function there are a few things:

Player.prototype.draw = function (context, xView, yView) {

    /// Add the half width instead of subtract it
    xView = this.x + this.width / 2;
    yView = this.y + this.height / 2;

    /// not needed as you clear the canvas in the next step
    //playerCtx.drawImage(imgSprite, 0, 0, ....
    playerCtx.save();
    playerCtx.clearRect(0, 0, game.width, game.height);

    /// make sure pivot is moved to center before rotation
    playerCtx.translate(xView, yView);

    /// rotate, you should make new sprite where direction
    /// points to the right. I'm add 90 here to compensate
    playerCtx.rotate((angle + 90) * Math.PI / 180);

    /// translate back before drawing the sprite as we draw
    /// from the corner and not the center of the image
    playerCtx.translate(-xView, -yView);

    playerCtx.drawImage(imgSprite, 0, 0, this.width, this.height, this.x, this.y, this.width, this.height);

    playerCtx.restore();
}

现在，你将看到的东西的作品。

Now you will see the things works.

您的图像应始终指向绘制的右键的。这是因为总是在0度（或弧度）角。这将节省你一些麻烦。予补偿，这是绘制函数通过加入90度角，但是这应而在子画面本身进行调节。

You images should always be drawn pointing right. This is because that is always angle at 0 degrees (or radians). This will save you some trouble. I compensated for this is the draw function by adding 90 degrees to the angle but this should rather be adjusted in the sprite itself.

另外我修改了你的关键处理程序（见演示详情）。

In addition I modified your key handler (see demo for details).