畫布旋轉圖像描繪了一個有角度的橢圓

我有一個圖像在我的畫布，並試圖以一種不尋常的方式旋轉它。我有我的形象旋轉，但在錯誤的原點。畫布旋轉圖像描繪了一個有角度的橢圓

我想旋轉圖像，使橢圓顯示爲從原點旋轉而不是旋轉圖像。最終，橢圓將在畫布中靜止並簡單地旋轉。

這是我當前的代碼：

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

畫布旋轉圖像描繪了一個有角度的橢圓

回答

相關問題