JavaScript:围绕其中心旋转一个canvas以获得2D双面轮廓

我一直在使用JavaScriptHTML制作2D双面滚动游戏。 游戏设置在空间中,玩家角色可以在其中(上,下,左,右键)飞行,并旋转他周围的世界(A和D键)。 这里是HTML和JavaScript代码:

<body onkeydown="keyDown(event)" onkeyup="keyUp(event)"> <canvas id="graphics" width=600 height=400 style="position:absolute;margin:0 auto;vertical-align:middle;background-image:url('Black.png');"</canvas> <script> //VARIABLES var gameCanvas = document.getElementById("graphics"); var grafx = gameCanvas.getContext("2d"); var player = new GameObject("Character1NoAAInvert.png", 268, 160, 64, 59); var maxBlock = 5; var block = new Array(); for (var i = 0; i <= maxBlock; i++) { block[i] = new GameObject('BlockInvert.png', i * 60 + 100, 300, 62, 62); } var img = new Image(); img.src = "Character1NoAAInvert.png"; var isA = false; var isD = false; var isUp = false; var isDown = false; var isLeft = false; var isRight = false; var rotation = 0; var rotationVelocity = 0; var canvasCenterX = gameCanvas.width / 2; var canvasCenterY = gameCanvas.height / 2; document.body.appendChild(img); player.Gravity = 20; player.Weight = 0.4; //EVENTS function keyDown(e) { if (String.fromCharCode(e.keyCode) === "A") isA = true; if (String.fromCharCode(e.keyCode) === "D") isD = true; if (String.fromCharCode(e.keyCode) === "&") isUp = true; if (String.fromCharCode(e.keyCode) === "(") isDown = true; if (String.fromCharCode(e.keyCode) === "%") isLeft = true; if (String.fromCharCode(e.keyCode) === "'") isRight = true; } function keyUp(e) { if (String.fromCharCode(e.keyCode) === "A") isA = false; if (String.fromCharCode(e.keyCode) === "D") isD = false; if (String.fromCharCode(e.keyCode) === "&") isUp = false; if (String.fromCharCode(e.keyCode) === "(") isDown = false; if (String.fromCharCode(e.keyCode) === "%") isLeft = false; if (String.fromCharCode(e.keyCode) === "'") isRight = false; } //MAINLOOP MainLoop(); function MainLoop() { //PRE VARIABLE ADJUSTMENTS for (var i=0;i<=maxBlock;i++) block[i].X += -player.Velocity_X; for (var i=0;i<=maxBlock;i++) block[i].Y += -player.Velocity_Y; grafx.rotate(rotation * Math.PI / 7200); player.Velocity_X = player.Velocity_X * 0.98; player.Velocity_Y = player.Velocity_Y * 0.98; player.Rotation -= rotationVelocity; rotation += rotationVelocity; rotationVelocity = rotationVelocity * 0.5; //LOGIC if (isA) rotationVelocity += 0.1; if (isD) rotationVelocity += -0.1; if (!isUp && !isDown) player.Velocity = 0; if (isUp) player.Velocity_Y += -0.1; if (isDown) player.Velocity_Y += 0.1; if (isLeft) player.Velocity_X += -0.1; if (isRight) player.Velocity_X += 0.1; //if (player.Velocity_Y < player.Gravity) player.Velocity_Y += player.Weight; for (var i = 0; i <= maxBlock; i++) { if (player.isColliding(block[i]) && player.Y + player.Height < block[i].Y + player.Velocity_Y) { player.Y = block[i].Y - player.Height; player.Velocity_Y = 0; } } //POST VARIABLE ADJUSTMENTS //RENDERING grafx.clearRect(0, 0, gameCanvas.width, gameCanvas.height); grafx.drawImage(player.Sprite, player.X, player.Y); for (var i = 0; i <= maxBlock; i++) { grafx.drawImage(block[i].Sprite, block[i].X, block[i].Y); } setTimeout(MainLoop, 1000 / 60); } function GameObject(img, x, y, width, height) { this.Sprite = new Image(); this.Sprite.src = img; this.X = x; this.Y = y; this.Previous_X = this.X; this.Previous_Y = this.Y; this.Velocity_X = 0; this.Velocity_Y = 0; this.Width = width; this.Height = height; this.Gravity = 0; this.Weight = 0; this.isColliding = function (obj) { if (this.X > obj.X + obj.Width) return false; else if (this.X + this.Width < obj.X) return false; else if (this.Y > obj.Y + obj.Height) return false; else if (this.Y + this.Height < obj.Y) return false; else return true; }; } </script> </body> 

但是,我不知道如何编程canvas绕其中心旋转,而不是原点(左上角)。 我知道这已经被问及在堆栈溢出之前回答,但我发现很难理解的例子,我不能成功地将它们应用到我的代码。 当按下A或D键时,canvas应从其中心顺时针或逆时针旋转。

什么是实现这些事情的最好方法?

上下文有两个相关的function。 有context.rotate(angle) ,你已经知道,然后有context.translate(x,y) 。 这是一个小提琴。

http://jsfiddle.net/awsumpwner27/k7CVw/

为了方便起见,我还使用了context.save()context.restore()来存储上下文的状态。