旋转图像onclick Javascript

正如标题所说，我试图在用户单击按钮后旋转图像。我是javasript的新手，所以我仍在努力弄清楚事情是如何运作的。我发现了一个很好的例子，但是他们的两个图像总是在旋转。我希望我的图像只旋转一次45度

我希望图像像这里的一样旋转：但不是每次只旋转一次

以下是我到目前为止的情况：

   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>

旋转图像

只需删除

animate（）

函数中的

doSpin（）

回调：

wheel.animate({
    top: newTop,
    left: newLeft,
}, 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();
    });
 }