HTML5旋转方法倾斜图像

Question

我正在为Javascript编写游戏引擎，并试图让我的精灵旋转。

但是，当我旋转我的精灵时，图像偏斜。它旋转，但它不是正确的尺寸。

我遵循与使用Image对象和2d库进行Java编程时使用的基本逻辑相同的基本逻辑，但得到不同的结果。 （图像扭曲和不应该...只是需要旋转）

function Sprite(imgg,w,h) 
{ 
    this.img = imgg; 
    this.x = 350;//Math.random()*700; 
    this.y = 350;//Math.random()*700; 
    this.vx = 0;//Math.random()*8-4; 
    this.vy = 0;//Math.random()*8-4; 
    this.width = w; 
    this.height = h; 
    this.rotatespeed = 0;//0.01; 
    this.rotate = 40; 

} 

function drawSprite(sprite, ctx) 
{ 

    ctx.save(); 

    ctx.translate(sprite.x,sprite.y); 
    ctx.rotate(sprite.rotate); 


    ctx.drawImage(sprite.img,0,0,sprite.img.width,sprite.img.height,-sprite.width/2,-sprite.height,sprite.width,sprite.height); 


    ctx.restore(); 
} 

function drawGame(g) 
{ 
    var gameLoop = setInterval(function(){ 

     g.context.clearRect(0,0,g.canvas.width, g.canvas.height); 
     g.context.save(); 


     g.context.translate(g.canvas.width/2, g.canvas.height/2); 
     g.context.scale(g.camera.scale,g.camera.scale); 
     g.context.rotate(g.camera.rotate); 
     g.context.translate(g.camera.x,g.camera.y); 


     for(var i=0;i<g.objects.length;i++) 
     { 
      updateSprite(g.objects[i]); 
      drawSprite(g.objects[i], g.context); 
     } 
     g.context.restore(); 

    },setIntervalAmount); 

} 

Answer 1

原来一切都不错，但在Web浏览器中的一个维度是非常捉襟见肘，因为我有开发者控制台了，所以这全是一种错觉。