js canvas 旋转 drawImage

在JavaScript中，Canvas API提供了一个`drawImage()`方法用于将图像绘制到画布上。如果你想旋转图片，你可以通过设置`transform`属性来实现，特别是使用`rotate()`方法结合`translate()`方法，因为`drawImage()`本身并不支持直接的旋转。

这是一个基本的例子：

// 获取canvas元素和2D渲染上下文
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

// 加载图片
var img = new Image();
img.onload = function() {
  // 图片加载完成后，设置旋转中心点（这里通常为图像左上角）
  var centerX = canvas.width / 2;
  var centerY = canvas.height / 2;

  // 设置旋转角度
  ctx.translate(centerX, centerY);
  ctx.rotate(Math.PI / 4); // 90度旋转

  // 绘制旋转后的图片
  ctx.drawImage(img, -img.width / 2, -img.height / 2, img.width, img.height); // 图像实际宽度和高度负值表示从原点开始旋转
};

img.src = 'your-image-url';

在这个例子中，我们先计算出旋转中心点，然后通过`translate()`将当前坐标系移动到这个点，接着`rotate()`指定旋转角度，最后使用`drawImage()`按照新的坐标和大小绘制图像，其中负值是为了保持旋转后的图片尺寸不变。