canvas在舞台上点击后图片旋转_javascript canvas 如何对图片进行绕中心点旋转

可以使用canvas的`translate()`和`rotate()`方法来实现对图片进行绕中心点旋转的效果。

首先，需要将画布的原点移动到图片的中心点。可以通过以下代码实现：

ctx.translate(image.width/2, image.height/2);

接着，使用`rotate()`方法对画布进行旋转，旋转角度可以通过角度制或弧度制来指定。例如，以下代码将图片绕中心点逆时针旋转45度：

ctx.rotate(-Math.PI/4);

最后，需要将画布的原点移回到左上角位置，以免影响后面的绘制操作。可以通过以下代码实现：

ctx.translate(-image.width/2, -image.height/2);

完整的代码示例：

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

const image = new Image();
image.src = 'image.png';
image.onload = function() {
  // 将画布的原点移动到图片中心点
  ctx.translate(image.width/2, image.height/2);
  // 绕中心点逆时针旋转45度
  ctx.rotate(-Math.PI/4);
  // 绘制图片
  ctx.drawImage(image, -image.width/2, -image.height/2);
  // 将画布原点移回左上角
  ctx.translate(-image.width/2, -image.height/2);
};