js事件控制图片缓慢旋转

你可以通过使用 JavaScript 中的定时器 setInterval() 方法来控制图片的缓慢旋转。具体实现步骤如下：

1. 获取要旋转的图片元素。
2. 定义一个角度变量，用来记录图片旋转的角度。
3. 使用 setInterval() 方法设置一个定时器，每隔一定时间改变图片的旋转角度。
4. 在定时器中，通过修改图片的 CSS 样式 transform:rotate() 来实现图片的旋转效果。

以下是一个示例代码：

HTML 代码：

<img id="img" src="image.jpg" />

JavaScript 代码：

var angle = 0;
var img = document.getElementById("img");

setInterval(function() {
  angle += 5;
  img.style.transform = "rotate(" + angle + "deg)";
}, 50);

在上面的示例代码中，每隔 50 毫秒就会将角度值加 5，并通过修改图片的 transform 样式来实现旋转的效果。你可以根据自己的需要来调整定时器的时间间隔和旋转角度的增量。

相关问题

fabricjs点击控件，让图片根据鼠标旋转，但是旋转速度太快了如何解决

如果旋转速度太快，你可以通过调整旋转的角度来减缓旋转速度。你可以使用以下代码来使旋转速度变慢：

canvas.on('mouse:down', function(options) {
    if(options.target) {
        // 获取鼠标点击位置和图片中心点位置
        var mouse = canvas.getPointer(options.e);
        var center = options.target.getCenterPoint();

        // 计算鼠标相对于图片中心点的角度
        var dx = mouse.x - center.x;
        var dy = mouse.y - center.y;
        var angle = Math.atan2(dy, dx);

        // 计算旋转角度
        var rotateAngle = angle * 180 / Math.PI - options.target.angle;
        if (rotateAngle > 180) {
            rotateAngle -= 360;
        } else if (rotateAngle < -180) {
            rotateAngle += 360;
        }
        rotateAngle /= 10;

        // 将图片旋转到计算出的角度
        var duration = 100; // 旋转动画的持续时间
        options.target.animate('angle', options.target.angle + rotateAngle, {
            duration: duration,
            easing: fabric.util.ease.easeOutCubic,
            onChange: canvas.renderAll.bind(canvas)
        });
    }
});

在这个示例中，我们计算出旋转的角度，并将其除以10，以减缓旋转速度。我们使用`fabric.Image`的`animate`方法来缓慢地旋转图片，这个方法需要指定旋转动画的持续时间和缓动函数。在`onChange`回调中，我们调用`canvas.renderAll`方法来更新画布。

你可以通过调整旋转角度的除数和动画持续时间来进一步控制旋转速度。