如何用javascript中的canvas让图片自己旋转

可以使用canvas中的`rotate()`方法来实现图片的自动旋转。具体步骤如下：

1. 获取canvas元素和绘图上下文对象。

2. 创建一个Image对象，加载需要旋转的图片。

3. 在Image对象的`onload`事件中，将图片绘制到canvas上。

4. 使用`setInterval()`方法循环执行旋转操作，每次旋转时先清除canvas上的内容，然后根据旋转角度进行旋转，最后将旋转后的图片重新绘制到canvas上。

下面是一个示例代码：

// 获取canvas元素和绘图上下文对象
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

// 创建一个Image对象，加载需要旋转的图片
var img = new Image();
img.src = "image.jpg";

// 在Image对象的onload事件中，将图片绘制到canvas上
img.onload = function() {
  ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
};

// 初始化旋转角度
var angle = 0;

// 循环执行旋转操作
setInterval(function() {
  // 清除canvas上的内容
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  
  // 根据旋转角度进行旋转
  ctx.save();
  ctx.translate(canvas.width / 2, canvas.height / 2);
  ctx.rotate(angle * Math.PI / 180);
  ctx.drawImage(img, -canvas.width / 2, -canvas.height / 2, canvas.width, canvas.height);
  ctx.restore();
  
  // 更新旋转角度
  angle += 1;
}, 50);

注意：以上代码只是一个简单的示例，实际应用中需要考虑图片的加载时间和性能问题。另外，为了避免内存泄漏，需要在不需要旋转时清除`setInterval()`定时器。