如何在Canvas中实现裁剪Sprite的动态旋转？

我已经有可运行的Sprite裁剪代码、图片旋转代码，以及计算敌塔与敌人相对角度的代码，但无法实现裁剪Sprite的旋转效果。希望将裁剪绘制函数与旋转绘制函数合并，以动态旋转裁剪后的Sprite。当前已有3种不同塔型，部分可追踪敌人，但带动画的裁剪Sprite无法实现该功能。

Sprite裁剪代码 #

draw() {
const cropWidth = this.image.width / this.frames.max;
const crop = {
  position: {
    x: cropWidth * this.frames.current,
    y: 0,
  },
  width: cropWidth,
  height: this.image.height,
};

const canvasMap = document.getElementById("canvasGame");
const cMap = canvasMap.getContext("2d");

cMap.drawImage(
  this.image,
  crop.position.x,
  crop.position.y,
  crop.width,
  crop.height,
  this.position.x + this.offset.x,
  this.position.y + this.offset.y,
  crop.width,
  crop.height
);
}

图片旋转代码 #

function drawRotated(image, cMap, center, degrees) {
  // cMap.clearRect(0, 0, canvas.width, canvas.height);
  cMap.save();
  cMap.translate(center.x, center.y);
  cMap.rotate((degrees * Math.PI) / 180);
  cMap.drawImage(image, -image.width / 2, -image.width / 2);
  cMap.restore();
}

敌塔角度计算代码 #

function Angle(center, target) {
  var dy = target.y - center.y;
  var dx = target.x - center.x;
  var theta = Math.atan2(dy, dx); // 范围 (-PI, PI]
  theta *= 180 / Math.PI; // 弧度转角度，范围 (-180, 180]
  //if (theta < 0) theta = 360 + theta; // 转为范围 [0, 360)
  return theta;
}

将裁剪逻辑与旋转逻辑整合到同一个绘制函数中，核心是在旋转的上下文环境里绘制裁剪后的Sprite区域，同时确保旋转中心与塔的中心点对齐。修改后的代码如下：

draw(targetPosition) {
  const cropWidth = this.image.width / this.frames.max;
  const crop = {
    position: {
      x: cropWidth * this.frames.current,
      y: 0,
    },
    width: cropWidth,
    height: this.image.height,
  };

  const canvasMap = document.getElementById("canvasGame");
  const cMap = canvasMap.getContext("2d");
  
  // 计算塔的实际中心点（包含偏移和裁剪区域的半宽高）
  const towerCenter = {
    x: this.position.x + this.offset.x + crop.width / 2,
    y: this.position.y + this.offset.y + crop.height / 2
  };
  
  // 获取需要旋转的角度
  const rotationDegrees = Angle(towerCenter, targetPosition);

  // 保存当前上下文状态，避免影响其他绘制
  cMap.save();
  // 将坐标原点平移到塔的中心点
  cMap.translate(towerCenter.x, towerCenter.y);
  // 应用旋转角度（弧度转换）
  cMap.rotate((rotationDegrees * Math.PI) / 180);
  // 绘制裁剪后的Sprite，以原点为中心（所以偏移为负的半宽高）
  cMap.drawImage(
    this.image,
    crop.position.x,
    crop.position.y,
    crop.width,
    crop.height,
    -crop.width / 2,
    -crop.height / 2,
    crop.width,
    crop.height
  );
  // 恢复上下文状态
  cMap.restore();
}

关键说明 #

• 旋转中心必须是塔的实际中心点：通过this.position + offset加上裁剪区域的半宽高计算得出
• 绘制裁剪Sprite时，位置参数设为-crop.width/2和-crop.height/2，确保裁剪后的Sprite以旋转中心（原点）对齐
• 使用save()和restore()维护画布上下文状态，防止旋转操作影响其他元素的绘制
• 传入敌人的targetPosition即可动态计算角度，实现塔对敌人的追踪旋转

内容的提问来源于stack exchange，提问作者Jan