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属性记录当前角度