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

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

我想旋转图像，使椭圆从原点旋转，而不是图像本身旋转。最终，椭圆在画布上是静止的，只是简单地旋转

这是我当前的代码：

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）实现

我创建了一个JSFIDLE，其中包含了我迄今为止所获得的内容：

---

转换的顺序很重要。缺少将圆的原点放置在正确点的平移（假设需要圆心）

---

你说的中心是指图像还是圆？你可以在任何你想要的地方做中心。drawImage的第6和第7个参数应该是图像上（或关闭）要旋转的位置的负数。但问题是，椭圆不是一个完美的圆，所以如果我只想旋转，原点将不同。如果你把椭圆想象成一个有角度的圆，你想让它像轮子一样旋转，我不完全明白怎么做。如果你在滚动椭圆之后，你就必须改变与角度相关的原点。类似于

varyoff=（Math.cos（angle*2）*（（w-h）/2））/2然后将其添加到第一个翻译y坐标。但是滚动椭圆的轴与地面接触点有偏移，在移动的汽车上，车轮（椭圆）的旋转速度必须变化，汽车才能保持恒定的速度。尝试搜索“滚动椭圆”
   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