js实现图片旋转的三种方法

下面是“js实现图片旋转的三种方法”的完整攻略。

方法一：transform属性

实现过程

使用 transform 属性对图片进行旋转。其中 transform 属性可以通过 rotate 值进行旋转，例如 transform: rotate(90deg) 可以将图片顺时针旋转 90 度。

示例说明

以下代码实现了点击按钮时图片顺时针旋转 90 度：

<button onclick="rotateImage()">旋转图片</button>
<img id="image" src="image.png">

<script>
  function rotateImage() {
    var image = document.getElementById('image');
    var transformValue = window.getComputedStyle(image).getPropertyValue('transform');
    var rotate = 0;
    if (transformValue !== 'none') {
      var matrix = transformValue.split(',');
      rotate = Math.round(Math.atan2(parseFloat(matrix[1]), parseFloat(matrix[0])) * (180/Math.PI));
    }
    image.style.transform = 'rotate(' + (rotate + 90) + 'deg)';
  }
</script>

方法二：canvas标签

实现过程

使用 canvas 标签绘制图片并进行旋转。其中 rotate 方法可以直接对绘制的图片进行旋转。

示例说明

以下代码实现了点击按钮时使用 canvas 标签将图片顺时针旋转 90 度：

<button onclick="rotateImage()">旋转图片</button>
<canvas id="canvas" width="500" height="500"></canvas>
<img id="image" src="image.png" style="display:none;">

<script>
  var canvas = document.getElementById('canvas');
  var ctx = canvas.getContext('2d');
  var image = document.getElementById('image');

  function rotateImage() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.translate(canvas.width/2, canvas.height/2);
    ctx.rotate(Math.PI/2);
    ctx.drawImage(image, -image.width/2, -image.height/2);
  }
</script>

方法三：CSS3 Animation

实现过程

使用 CSS3 的 animation 属性对图片进行旋转。在 CSS 中，可以使用 @keyframes 定义动画帧，使用 animation 属性对动画进行配置。

示例说明

以下代码实现了点击按钮时使用 animation 属性让图片顺时针旋转 90 度：

<button onclick="rotateImage()">旋转图片</button>
<img id="image" src="image.png">

<style>
  @keyframes rotate {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(90deg);
    }
  }
  #image {
    animation: rotate 1s forwards;
  }
</style>

<script>
  function rotateImage() {
    var image = document.getElementById('image');
    image.style.animation = 'rotate 1s forwards';
  }
</script>

以上就是三种js实现图片旋转的方法。希望能对你有所帮助。