当前位置：首页 > JavaScript

js实现图片旋转

2026-04-03 23:15:25JavaScript

使用 CSS transform 属性旋转图片

通过 CSS 的 transform 属性可以轻松实现图片旋转效果。在 JavaScript 中动态修改该属性即可控制旋转角度。

const image = document.getElementById('myImage');
image.style.transform = 'rotate(45deg)';

使用 Canvas 绘制旋转图片

Canvas 提供了更底层的绘图能力，可以实现更复杂的旋转效果，包括围绕特定点旋转。

js实现图片旋转

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const img = new Image();

img.onload = function() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.save();
    ctx.translate(canvas.width/2, canvas.height/2);
    ctx.rotate(Math.PI / 4); // 45度
    ctx.drawImage(img, -img.width/2, -img.height/2);
    ctx.restore();
};
img.src = 'image.jpg';

实现连续旋转动画

通过 requestAnimationFrame 可以实现平滑的连续旋转动画效果。

js实现图片旋转

let angle = 0;
function rotate() {
    const image = document.getElementById('myImage');
    angle = (angle + 2) % 360;
    image.style.transform = `rotate(${angle}deg)`;
    requestAnimationFrame(rotate);
}
rotate();

使用 CSS 动画实现旋转

纯 CSS 动画也可以实现旋转效果，通过 JavaScript 控制动画的播放状态。

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.spin {
    animation: spin 2s linear infinite;
}

document.getElementById('myImage').classList.add('spin');

实现拖拽旋转功能

结合鼠标事件可以实现用户交互式的图片旋转功能。

const image = document.getElementById('myImage');
let isDragging = false;
let startAngle = 0;
let currentAngle = 0;

image.addEventListener('mousedown', (e) => {
    isDragging = true;
    startAngle = Math.atan2(e.clientY - image.offsetTop, e.clientX - image.offsetLeft) * (180 / Math.PI);
});

document.addEventListener('mousemove', (e) => {
    if (!isDragging) return;
    const angle = Math.atan2(e.clientY - image.offsetTop, e.clientX - image.offsetLeft) * (180 / Math.PI);
    currentAngle += angle - startAngle;
    image.style.transform = `rotate(${currentAngle}deg)`;
    startAngle = angle;
});

document.addEventListener('mouseup', () => {
    isDragging = false;
});