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

我有一个图像在我的画布，并试图以一种不寻常的方式旋转它。我有我的形象旋转，但在错误的原点。画布旋转图像描绘了一个有角度的椭圆

我想旋转图像，使椭圆显示为从原点旋转而不是旋转图像。最终，椭圆将在画布中静止并简单地旋转。

这是我当前的代码：

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完成或仅是人们可以通过三维如WebGL的东西吗？

我创造了什么，我到目前为止得到了的jsfiddle： http://jsfiddle.net/hc0p5e06/

来源

2015-09-19 Sir

的转化的顺序是非常重要的。您错过了将圆的原点置于正确的位置的翻译（假设您想要中心）

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

来源

2015-09-19 03:07:42 Blindman67

中心是指图像还是圆圈？ – Sir

你可以将中心放在任何你想要的地方。 drawImage的第6和第7个参数应该是要旋转的图像上（或关闭）位置的负值。 – Blindman67

但问题是，椭圆不是一个完美的圆形，所以如果我只想旋转它，原点就会不同。如果你想象椭圆只是一个角度的圆，而且你希望它像轮子一样旋转，那么我不完全知道如何做。 – Sir

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

回答

相关问题