javascript - 旋转图像 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);