JavaScript实现环绕鼠标旋转效果

JavaScript实现环绕鼠标旋转效果的过程可以分为以下几个步骤：

1. 确定旋转的中心点
2. 监听鼠标移动事件
3. 计算鼠标位置和中心点的夹角
4. 将计算出来的夹角应用到旋转的元素上，使其旋转

以下是两个示例说明：

示例1：使用CSS3 transform属性实现环绕鼠标旋转

HTML结构：

<div class="wrap">
  <div class="box"></div>
</div>

CSS代码：

.wrap {
  width: 300px;
  height: 300px;
  position: relative;
}

.box {
  width: 50px;
  height: 50px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: red;
  border-radius: 50%;
  transition: transform 0.3s ease-out;
}

JavaScript代码：

var wrap = document.querySelector('.wrap');
var box = document.querySelector('.box');

wrap.addEventListener('mousemove', function(e) {
  var mouseX = e.clientX;
  var mouseY = e.clientY;
  var centerX = wrap.offsetLeft + wrap.offsetWidth / 2;
  var centerY = wrap.offsetTop + wrap.offsetHeight / 2;
  var angle = Math.atan2(mouseY - centerY, mouseX - centerX) * 180 / Math.PI;
  box.style.transform = 'translate(-50%, -50%) rotate(' + angle + 'deg)';
});

示例2：使用canvas绘制图形实现环绕鼠标旋转

HTML结构：

<canvas id="canvas"></canvas>

JavaScript代码：

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 50;

canvas.addEventListener('mousemove', function(e) {
  var mouseX = e.clientX;
  var mouseY = e.clientY;
  var angle = Math.atan2(mouseY - centerY, mouseX - centerX);
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.beginPath();
  ctx.arc(centerX, centerY, radius, angle - Math.PI / 2, angle + Math.PI / 2);
  ctx.lineTo(centerX, centerY);
  ctx.fillStyle = 'red';
  ctx.fill();
});

在这个示例中，我们使用canvas绘制了一个半圆，并且将鼠标指向的位置和canvas中心点的夹角应用到了绘制图形的角度上，以达到环绕鼠标旋转的效果。