canvas绘制图片旋转

要在canvas上绘制旋转后的图片，可以使用以下步骤：

1. 创建一个Image对象并加载要绘制的图片。
2. 在canvas上创建一个2D上下文。
3. 使用上下文的`translate()`方法将绘图原点移动到图片中心。
4. 使用上下文的`rotate()`方法旋转画布。
5. 使用上下文的`drawImage()`方法绘制图片。

以下是示例代码：

// 创建一个Image对象并加载图片
var img = new Image();
img.src = 'path/to/image.png';

// 在canvas上创建2D上下文
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

// 等待图片加载完成
img.onload = function() {
  // 将绘图原点移动到图片中心
  ctx.translate(canvas.width/2, canvas.height/2);
  
  // 旋转画布
  ctx.rotate(Math.PI/4); // 旋转45度
  
  // 绘制图片
  ctx.drawImage(img, -img.width/2, -img.height/2);
}

注意，`rotate()`方法接收的参数是弧度而不是角度，所以需要将角度转换为弧度。在本例中，我们旋转了45度，所以我们将`Math.PI/4`传递给`rotate()`方法。