js实现旋转90
实现旋转90度的JavaScript方法
旋转90度通常涉及对图像、DOM元素或二维数组进行操作。以下是几种常见场景的实现方法：
旋转DOM元素90度
使用CSS transform属性实现DOM元素旋转：
const element = document.getElementById('targetElement');
element.style.transform = 'rotate(90deg)';添加过渡效果使旋转更平滑：
element.style.transition = 'transform 0.5s ease';旋转二维数组90度
顺时针旋转二维数组的算法实现：
function rotateMatrix90Clockwise(matrix) {
const n = matrix.length;
const result = new Array(n).fill().map(() => new Array(n).fill(0));
for (let i = 0; i < n; i++) {
for (let j = 0; j < n; j++) {
result[j][n - 1 - i] = matrix[i][j];
}
}
return result;
}逆时针旋转二维数组的实现：
function rotateMatrix90CounterClockwise(matrix) {
const n = matrix.length;
const result = new Array(n).fill().map(() => new Array(n).fill(0));
for (let i = 0; i < n; i++) {
for (let j = 0; j < n; j++) {
result[n - 1 - j][i] = matrix[i][j];
}
}
return result;
}使用Canvas旋转图像90度
通过Canvas API旋转图像：
function rotateImage90(imageElement) {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
// 交换宽高以适应旋转后的尺寸
canvas.width = imageElement.height;
canvas.height = imageElement.width;
// 平移并旋转画布
ctx.translate(canvas.width/2, canvas.height/2);
ctx.rotate(Math.PI/2);
ctx.drawImage(imageElement, -imageElement.width/2, -imageElement.height/2);
return canvas;
}使用CSS类实现旋转
定义CSS类并通过JavaScript切换：
.rotate-90 {
transform: rotate(90deg);
transform-origin: center center;
}JavaScript切换类：
document.getElementById('element').classList.add('rotate-90');注意事项
- 旋转DOM元素时考虑
transform-origin属性控制旋转中心点 - 矩阵旋转算法时间复杂度为O(n²)，大型矩阵需考虑性能优化
- Canvas旋转图像时注意处理跨域问题和图像质量
- 连续旋转时需考虑当前旋转状态，可通过添加data属性记录当前角度
