画布旋转图像，描绘有角度的椭圆

Question

我的画布中有一张图片，我正在尝试以一种不寻常的方式旋转它。我的图像旋转但在错误的原点。

我想以这样一种方式旋转图像，即椭圆显示为从其原点旋转，而不是图像本身旋转。在那里，椭圆最终会在画布中保持静止并简单地旋转。

这是我当前的代码：

var canvas      = document.getElementById('canvas'),
    ctx         = canvas.getContext('2d');

var angle;
var toRads      = Math.PI/180;  
var start       = new Date().getTime();
var rotation    = 15;


function draw(){
    var x         = canvas.width/2 - img.width/2;
    var y         = canvas.height/2 - img.height/2;
    var deltaTime = new Date().getTime() - start;

        start     = new Date().getTime();
        angle     = (angle || 0) + (deltaTime/1000 * rotation);

    if(angle > 360){angle = 0;}

    ctx.clearRect(0,0,canvas.width,canvas.height);

        ctx.save();
        ctx.translate(x,y);
        ctx.rotate(angle * toRads);
        ctx.drawImage(img,20,20);
        ctx.restore();    

    setTimeout(draw,1);
}

我想知道这是否可以在 2D 中完成，还是只能通过 3D（例如 webGL 的东西）完成？

我创建了一个 jsfiddle 我到目前为止： http://jsfiddle.net/hc0p5e06/

Answer 1

转换的顺序很重要。您缺少将圆的原点放置在正确点的翻译（假设您想要中心）

   var w = img.width;  // get the image width and height
   var h = img.height;
   ctx.translate(x,y);
   ctx.rotate(angle * toRads);
   ctx.drawImage(img,0,0,w,h,-w/2,-h/2,w,h); // draw the image translated half
                                             // its size up and left in the new
                                             // coordinate space