canvas 中的rotate原地旋转的简单实现方法

在Canvas中，要实现图像的原地旋转，你需要使用translate方法将坐标系原点移到图像的中心，然后使用rotate方法进行旋转，最后使用translate方法将坐标系恢复到原来的位置，并绘制图像。

以下是一个简单的JavaScript示例，展示了如何在Canvas上实现图像的原地旋转：

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const image = new Image();
 
image.onload = function() {
  // 保存当前状态
  ctx.save();
 
  // 将坐标系原点移到图像中心
  ctx.translate(canvas.width / 2, canvas.height / 2);
 
  // 旋转图像
  ctx.rotate(Math.PI / 4); // 旋转45度
 
  // 将坐标系恢复到旋转前的位置
  ctx.translate(-canvas.width / 2, -canvas.height / 2);
 
  // 绘制旋转后的图像
  ctx.drawImage(image, canvas.width / 2 - image.width / 2, canvas.height / 2 - image.height / 2);
 
  // 恢复之前保存的状态
  ctx.restore();
};
 
image.src = 'path_to_your_image.jpg'; // 替换为你的图片路径

在这个例子中，图像会以其自身的中心点为旋转中心进行原地旋转。首先，我们保存了Canvas的状态，然后移动坐标系，进行旋转，再将坐标系恢复，最后绘制图像。这样图像就会原地旋转，而不会移动。