将图像旋转不同程度的函数

Function to rotate an image various degrees

本文关键字：程度 函数 图像 旋转      更新时间：2023-09-26

我正在编写一个研究实验，其中几个预加载的图像之一可以以45度的倍数旋转显示。有没有相应的函数来完成这个操作比如我可以输入

var img45 = function(img, deg) { ...

我需要能够将预旋转的图像作为变量传递给不同的函数。

我不能使用CSS的变换，因为相同的图像需要在几个不同的角度可用，我不能只是变换画布显示，因为我需要预旋转的图像作为变量。

Rotate()可以工作，但不允许我将图片分配给一个新的变量，它反而修改了原始图像，这不是我想要的(我需要原始图像未被修改)

var img45 = function(img_id, angle) {
    $('#'+img_id).rotate(angle);
}

这是你需要的吗?这是jQuery，所以你需要包含jQuery的库。

像这样?

// Function to rotate element.
var rotate = function(elem, deg) {
  elem.style.transform = 'rotate(' + deg + ')';
}
// Test rotating boxes
var boxes = document.querySelectorAll('.box');
for (var i = 1; i <= boxes.length; ++i) {
  rotate(boxes[i], (5 * i) + 'deg');
}
.box {
  width: 128px;
  height: 128px;
  border: 1px solid #ddd;
  margin: 10px;
}
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

相关文章：