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

只需删除doSpin()功能中的animate()回调：

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/

上工作

旋转图像onclick Javascript

2 个答案: