当前位置：首页 > JavaScript

js 实现角度旋转

2026-02-03 02:47:26JavaScript

使用 CSS transform 实现旋转

通过修改元素的 transform 属性实现旋转效果。CSS 的 rotate() 函数接受角度参数（单位为 deg）。

const element = document.getElementById('target');
element.style.transform = 'rotate(45deg)'; // 旋转45度

动态控制旋转角度时，可通过变量或状态更新：

let angle = 0;
function rotateElement() {
  angle += 10;
  element.style.transform = `rotate(${angle}deg)`;
  requestAnimationFrame(rotateElement); // 实现动画循环
}
rotateElement();

使用 Canvas 绘制旋转图形

Canvas 的 rotate() 方法以弧度为单位旋转绘图上下文，需配合 save() 和 restore() 管理状态。

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

ctx.save(); // 保存当前状态
ctx.translate(100, 100); // 设置旋转中心点
ctx.rotate(Math.PI / 4); // 旋转45度（π/4弧度）
ctx.fillRect(-50, -50, 100, 100); // 绘制矩形（以中心为基准）
ctx.restore(); // 恢复原始状态

动态旋转示例：

function drawRotatedRect(angle) {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.save();
  ctx.translate(100, 100);
  ctx.rotate(angle);
  ctx.fillStyle = 'blue';
  ctx.fillRect(-50, -50, 100, 100);
  ctx.restore();
}

let angle = 0;
setInterval(() => {
  angle += 0.1;
  drawRotatedRect(angle);
}, 50);

使用 SVG 实现旋转

SVG 元素可通过 transform 属性或 CSS 实现旋转，支持角度单位和旋转中心点。

const svgElement = document.getElementById('svg-rect');
svgElement.setAttribute('transform', 'rotate(30, 50, 50)'); // 旋转30度，中心点(50,50)

动态更新示例：

let svgAngle = 0;
function updateSvgRotation() {
  svgAngle += 2;
  svgElement.setAttribute('transform', `rotate(${svgAngle}, 50, 50)`);
  requestAnimationFrame(updateSvgRotation);
}
updateSvgRotation();

使用 WebGL 实现三维旋转

WebGL 通过矩阵变换实现复杂旋转，通常使用库如 gl-matrix 处理数学运算。

const gl = canvas.getContext('webgl');
const program = initShaderProgram(gl, vsSource, fsSource); // 假设已初始化着色器

const modelViewMatrix = mat4.create();
mat4.rotate(modelViewMatrix, modelViewMatrix, angleInRadians, [0, 1, 0]); // 绕Y轴旋转

// 在渲染循环中更新旋转角度并绘制
function render() {
  mat4.rotate(modelViewMatrix, modelViewMatrix, 0.01, [0, 1, 0]);
  gl.uniformMatrix4fv(uModelViewMatrix, false, modelViewMatrix);
  gl.drawArrays(gl.TRIANGLES, 0, 36);
  requestAnimationFrame(render);
}
render();

角度与弧度转换

JavaScript 三角函数使用弧度，需注意单位转换：

js 实现角度旋转

function degToRad(degrees) {
  return degrees * (Math.PI / 180);
}

function radToDeg(radians) {
  return radians * (180 / Math.PI);
}

console.log(degToRad(180)); // 输出: 3.141592653589793