canvas在舞台上点击后图片旋转_Canvas实现图片360度旋转

实现图片360度旋转可以使用canvas的`transform`方法，通过设置旋转角度来实现。具体实现可以按照以下步骤进行：

1. 获取用户点击的坐标，通过`event.clientX`和`event.clientY`获取相对于浏览器窗口的坐标，再减去canvas元素的offsetLeft和offsetTop，得到相对于canvas元素的坐标。

2. 计算出图片中心点的坐标，可以通过图片的`width`和`height`属性获取宽高，再除以2得到中心点坐标。

3. 计算出图片中心点和用户点击点之间的角度，可以使用`Math.atan2()`方法计算出两点之间的反正切值，再将得到的弧度转换为角度。

4. 使用`context.translate()`方法将画布的原点移动到图片中心点，然后使用`context.rotate()`方法进行旋转，旋转角度为计算出的角度值。

5. 最后使用`context.drawImage()`方法将图片绘制到画布上即可。

以下是完整的代码示例：

HTML部分：

<canvas id="canvas" width="400" height="400"></canvas>
<img id="image" src="image.jpg" style="display:none;">

JS部分：

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');

var image = new Image();
image.src = 'image.jpg';
image.onload = function() {
  // 图片加载完成后绘制到画布上
  context.drawImage(image, 0, 0);
}

canvas.addEventListener('click', function(event) {
  // 获取用户点击的坐标
  var x = event.clientX - canvas.offsetLeft;
  var y = event.clientY - canvas.offsetTop;

  // 计算图片中心点坐标
  var centerX = canvas.width / 2;
  var centerY = canvas.height / 2;

  // 计算旋转角度
  var angle = Math.atan2(y - centerY, x - centerX) * 180 / Math.PI;

  // 清空画布
  context.clearRect(0, 0, canvas.width, canvas.height);

  // 移动画布原点到图片中心点
  context.translate(centerX, centerY);

  // 旋转画布
  context.rotate(angle * Math.PI / 180);

  // 绘制图片
  context.drawImage(image, -image.width / 2, -image.height / 2);

  // 恢复画布状态
  context.rotate(-angle * Math.PI / 180);
  context.translate(-centerX, -centerY);
});

以上代码实现了点击画布后根据用户点击点旋转图片，达到360度旋转的效果。