旋轉圖像onclick Javascript

Question

就像標題所說，我試圖旋轉圖像，一旦用戶點擊一個按鈕。我對javasript是新手，所以我仍然試圖弄清楚事情是如何工作的。我發現了一個很好的例子，但他們擁有的兩張照片總是在旋轉。我想讓我的圖像旋轉45度一次。

我想要的圖像旋轉喜歡這裏的那些：http://jsfiddle.net/Pvtzv/276/但不是每次只是一次

這是我到目前爲止有：

function doSpin() 
{ 

    wheel = new Image(); 
    //wheel.onload = initialDraw; // Once the image is loaded from file this function is called to draw the image in its starting position. 
    wheel.src = "./female_avatar.gif"; 
     var surfaceContext = surface.getContext('2d'); 
surfaceContext.drawImage(wheel, 0, 0); 

p += .02; 

var r = 100; 
var xcenter = 150; 
var ycenter = 150; 


var newLeft = Math.floor(xcenter + (r* Math.cos(p))); 
var newTop = Math.floor(ycenter + (r * Math.sin(p))); 
var newLeft1 = Math.floor(xcenter + -(r* Math.cos(p))); 
var newTop1 = Math.floor(ycenter + -(r * Math.sin(p))); 

    wheel.animate({ 
     top: newTop, 
     left: newLeft, 
    }, 2, function() { 
     doSpin() 
      }); 

     } 

在我的HTML

<button onclick="doSpin()">spin image</button> 

Answer 1

只需在animate()函數中刪除doSpin()回調：

wheel.animate({ 
    top: newTop, 
    left: newLeft, 
}, 2); 

Answer 2

<button onclick="moveit();">spin image</button> 

，並添加腳本標記的代碼

function moveit() { 
    p += .02; 

    var r = 100; 
    var xcenter = 150; 
    var ycenter = 150; 


    var newLeft = Math.floor(xcenter + (r* Math.cos(p))); 
    var newTop = Math.floor(ycenter + (r * Math.sin(p))); 
    var newLeft1 = Math.floor(xcenter + -(r* Math.cos(p))); 
    var newTop1 = Math.floor(ycenter + -(r * Math.sin(p))); 

    $('#friends').animate({ 
      top: newTop, 
      left: newLeft, 
     }, 2, function() { 
      moveit() 
       }); 
    $('#friends2').animate({ 
     top: newTop1, 
     left: newLeft1, 
    },10, function() { 
     moveit(); 
    }); 
} 

它的工作在這裏http://jsfiddle.net/cExsw/