JS图片旋转实现方法：CSS3 vs Canvas API

要实现图片旋转，可以使用CSS3中的'transform'属性或者Canvas API中的'rotate'方法。

使用CSS3实现图片旋转

1. 在HTML中添加一个'img'标签，指定图片路径。

2. 在CSS中给'img'标签添加一个'transform'属性，指定旋转角度。

示例代码

HTML:

<img src='image.jpg' class='rotate'>

CSS:

.rotate {
    transform: rotate(45deg);
}

使用Canvas API实现图片旋转

1. 在HTML中添加一个'canvas'标签，指定canvas的宽度和高度。

2. 在JavaScript中获取'canvas'元素，并创建一个2D上下文。

3. 使用'drawImage'方法将图片绘制到canvas上。

4. 使用'rotate'方法旋转画布，并重新绘制图片。

示例代码

HTML:

<canvas id='canvas' width='500' height='500'></canvas>

JavaScript:

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

var img = new Image();
img.src = 'image.jpg';
img.onload = function() {
    ctx.drawImage(img, 0, 0);
    ctx.translate(canvas.width/2, canvas.height/2);
    ctx.rotate(Math.PI/4);
    ctx.drawImage(img, -canvas.width/2, -canvas.height/2);
}

以上两种方法都可以实现图片旋转，具体选择哪种方法取决于具体的需求和实现方式。