JavaScript图片旋转效果实现方法详解

JavaScript 图片旋转效果的实现方法详解

前言

随着 Web 技术的发展，越来越多的动态特效展现在用户面前。其中，图片旋转效果是一种非常流行的动态特效。在本文中，我们将使用 JavaScript 来实现图片旋转效果，并介绍两个基于不同旋转方式的示例。

实现方法

HTML 代码

首先我们需要准备一个 HTML 代码，用于展示图片，如下所示：

<div id="imgContainer">
  <img src="img.png" alt="" id="img">
</div>

其中，img 标签是用于存放要旋转的图片的，imgContainer 是容器 div，用于居中展示图片。

CSS 代码

为了保证图片能够居中展示，我们需要添加一些必要的 CSS 样式。具体的样式如下：

#imgContainer {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

JavaScript 代码

接下来，我们就可以使用 JavaScript 来实现图片的旋转了。

1. 利用 CSS transform 实现图片旋转

CSS transform 是现代 Web 技术中实现图片旋转最为简单且通用的方法。我们可以借助 JS 的 DOM API 来控制 CSS 的 transform 属性来实现旋转效果。具体实现方法如下：

// 获取到图片元素以及控制旋转角度的按钮元素
const img = document.querySelector('#img');
const rotateBtn = document.querySelector('#rotateBtn');

// 通过 CSS transform 属性来控制图片的旋转
let degree = 0;
rotateBtn.addEventListener('click', () => {
  degree += 90;
  img.style.transform = `rotate(${degree}deg)`;
});

在点击按钮的时候，我们只需要使用 JS 修改 img 标签的 transform 属性，就可以实现图片的旋转了。

2. 利用 canvas 实现图片旋转

除了 CSS transform 外，canvas 也提供了旋转图片的 API。使用 canvas 进行旋转的优点是既可以实现单张图片的旋转，也可以对 canvas 中的多个图片进行较为复杂的动画设计，因此在一些视觉效果非常重要的交互场景下，它被广泛地应用。具体实现方法如下：

// 获取到图片元素以及控制旋转角度的按钮元素
const img = document.querySelector('#img');
const rotateBtn = document.querySelector('#rotateBtn');

// 根据图片文件创建一个图片对象
const imgObj = new Image();
imgObj.src = img.src;

// 获取 canvas 元素和绘图上下文
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');

// 通过 canvas API 绘制图片并实现旋转效果
let degree = 0;
rotateBtn.addEventListener('click', () => {
  degree += 90;
  canvas.width = imgObj.height;
  canvas.height = imgObj.width;
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.translate(canvas.width / 2, canvas.height / 2);
  ctx.rotate((degree * Math.PI) / 180);
  ctx.drawImage(
    imgObj,
    -imgObj.width / 2,
    -imgObj.height / 2,
    imgObj.width,
    imgObj.height
  );
  img.src = canvas.toDataURL();
});

在点击按钮的时候，我们先需要将 img 元素中的图片文件创建为图片对象 imgObj。接着，我们通过调用 canvas 的 API 进行图片绘制。过程中，我们通过 translate() 和 rotate() 方法实现图片的旋转，最后调用 toDataURL() 方法将 canvas 绘制的旋转后的图像转化为 base64 数据，再赋值给 img 的 src 属性。这一步操作就相当于将图片对象直接转换为了旋转后的图片对象，从而实现了图片旋转的效果。

示例说明

本文提供了两个示例：

1. 使用 CSS transform 实现图片旋转示例：展示页面 / 源代码
2. 使用 canvas 实现图片旋转示例：展示页面 / 源代码

在示例中，通过点击按钮可以实现图片的旋转。第一个示例使用 CSS transform 来旋转图片，相较于第二个使用 canvas，代码量更少、速度更快；第二个使用 canvas 来进行旋转处理，可以实现更加复杂的动画效果，视觉效果更好。