js 实现旋转
旋转的实现方式
在JavaScript中实现旋转可以通过CSS的transform属性或Canvas API完成。以下是两种常见方法：
使用CSS transform实现旋转
通过修改元素的transform属性实现旋转效果，适用于DOM元素：
const element = document.getElementById('target');
element.style.transform = 'rotate(45deg)'; // 旋转45度动态旋转动画示例：
let angle = 0;
setInterval(() => {
angle = (angle + 1) % 360;
element.style.transform = `rotate(${angle}deg)`;
}, 16);使用Canvas实现旋转
在Canvas中绘制旋转内容需要配合save()和restore()管理状态：
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
ctx.save();
ctx.translate(canvas.width/2, canvas.height/2); // 移动原点至中心
ctx.rotate(Math.PI / 4); // 旋转45弧度
ctx.fillRect(-50, -50, 100, 100); // 绘制以中心为基准的矩形
ctx.restore();3D旋转效果
实现3D旋转需要CSS 3D变换：
element.style.transform = 'rotateX(45deg) rotateY(30deg)';性能优化建议
- 对频繁旋转的动画使用
will-change: transform提升性能 - 考虑使用
requestAnimationFrame替代setInterval实现动画 - 对于复杂场景建议使用WebGL（Three.js等库）实现高性能旋转
