2

就像标题所说的那样，一旦用户单击按钮，我就会尝试旋转图像。我是 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>
4

2 回答 2

1

只需删除函数中的doSpin()回调animate()：

wheel.animate({
    top: newTop,
    left: newLeft,
}, 2);
于 2013-05-16T14:41:41.967 回答
1 
<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/上工作

于 2013-05-16T14:45:29.187 回答