360° 以鼠标位置为中心旋转图片的 JavaScript 实现

2023-12-17 13:16:47

前言

图片旋转是一种常见的图像处理操作，它可以为图片增添动态效果，或用于创建交互式图形。在本文中，我们将介绍如何使用 JavaScript 实现以鼠标位置为中心旋转图片的功能。

实现原理

要实现以鼠标位置为中心旋转图片，我们需要使用 HTML5 canvas 元素和 JavaScript。canvas 元素是一个矩形区域，可以用来绘制图形和图像。JavaScript 则可以用来操作 canvas 元素，并实现各种交互效果。

首先，我们需要创建一个 canvas 元素并将其添加到 HTML 页面中。然后，我们需要将图片加载到 canvas 元素中。接下来，我们需要计算鼠标位置并将其存储在变量中。最后，我们需要使用 JavaScript 将图片绕鼠标位置旋转一定角度。

具体步骤

创建 canvas 元素并将其添加到 HTML 页面中。

<canvas id="canvas" width="500" height="500"></canvas>

将图片加载到 canvas 元素中。

var image = new Image();
image.src = "image.jpg";
image.onload = function() {
  var context = canvas.getContext("2d");
  context.drawImage(image, 0, 0);
};

计算鼠标位置并将其存储在变量中。

var mouseX = 0;
var mouseY = 0;

canvas.addEventListener("mousemove", function(event) {
  mouseX = event.clientX;
  mouseY = event.clientY;
});

使用 JavaScript 将图片绕鼠标位置旋转一定角度。

var angle = 0;

function rotateImage() {
  var context = canvas.getContext("2d");
  context.save();
  context.translate(mouseX, mouseY);
  context.rotate(angle);
  context.translate(-mouseX, -mouseY);
  context.drawImage(image, 0, 0);
  context.restore();

  angle += 0.01;

  requestAnimationFrame(rotateImage);
}

rotateImage();