javascript 使用 2d html5Canvas 和 ctx.rotate 函数沿对象面向的方向移动对象
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19355026/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Move an object in the direction its facing using 2d html5Canvas and ctx.rotate function
提问by user2582299
The title kind of says it all, I am trying to move an object forward depending on the angle it is at.
标题说明了一切，我试图根据物体所处的角度向前移动物体。
Here is my relevant code:
这是我的相关代码：
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);
}
The object doesn't move corresponding to the var angle.
对象不会移动对应于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:
我不明白为什么我的代码不起作用，所以我使用了一个包含 36 个不同角度的精灵表。这有效，但是旋转太快。如果有人能告诉我为什么上述不能正常工作，或者我将如何使以下功能变慢：
if(Game.controls.right) {
currentFrame++;
angle+=10;
}
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.
慢我的意思是当按住左键时，angle+10; currentFrame++;上升到快速，添加更多帧可能需要太长时间。
EDIT
编辑
Added a Jfiddlefor 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.
为我原来的问题添加了一个Jfiddle，角度变量随着旋转而移动，例如，如果物体面向右，角度将等于 90，但物体看起来仍然不像向右移动，尽管相机确实如此.
回答by
Try to change cos and sin around as well as the sign:
尝试改变 cos 和 sin 以及符号：
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.
要进行旋转（在问题的编辑部分），您需要基本上减少步骤并提供更多精灵。更多的精灵不会变慢，但会使用更多的内存并稍微增加初始加载时间。
UPDATE
更新
Ok, there are a few things you need to correct (the above is one of them and they are corrected in the fiddle).
好的，您需要更正一些事情（以上是其中之一，并且在小提琴中已更正）。
The other things are in:
其他的东西在：
In your update()method:
在你的update()方法中：
// 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.
由于角度将决定负值或正值，您只需要根据意图添加或减去，因此向上添加两个值，向下减去两个值。该角度将确保 delta 符号正确。
In your drawfunction there are a few things:
在您的draw函数中有几件事：
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.
现在你会看到一切正常。
You images should always be drawn pointing right. This is because that is always angle at 0 degrees. 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.
你的图像应该总是指向右绘制。这是因为它的角度始终为 0 度。这将为您省去一些麻烦。我通过向角度添加 90 度来补偿绘制函数，但这应该在精灵本身中进行调整。
In addition I modified your key handler (see demo for details).
此外，我修改了您的密钥处理程序（有关详细信息，请参阅演示）。
