獲取HTML Canvas中旋轉劍的坐標

本文旨在幫助開發者理解如何在HTML Canvas中繪製一個旋轉的劍，並獲取劍的端點坐標。通過分析提供的代碼，我們將重點講解如何正確計算劍的端點坐標，使其能夠跟隨角色手臂旋轉，最終實現一個動態旋轉的劍的效果。本文將提供修改後的代碼示例，並解釋關鍵部分的邏輯。

理解坐標計算

在Canvas中繪製旋轉的物體，關鍵在於理解坐標系的變換。我們需要確定劍的起點（通常是角色手的位置）和終點。由於劍是旋轉的，終點坐標需要根據旋轉角度進行計算。

修改Sword 類的update 方法

原始代碼中，Sword 類的update 方法在計算劍的端點坐標時存在一些問題。正確的做法是，左手的位置作為劍的一個端點，右手的位置作為劍的另一個端點，然後根據劍的長度計算出另外兩個端點。 下面是修改後的update 方法：

 update() {
    this.draw();
    this.Lx = LeftHand.x;
    this.Ly = LeftHand.y;
    this.Rx = RightHand.x;
    this.Ry = RightHand.y;

    this.Lsx = LeftHand.x;
    this.Lsy = LeftHand.y;
    this.Rsx = RightHand.x Player.swordLength;
    this.Rsy = RightHand.y Player.swordLength;
  }

解釋:

• this.Lx, this.Ly: 左手的位置，作為劍的一個端點。
• this.Rx, this.Ry: 右手的位置，作為劍的另一個端點。
• this.Lsx, this.Lsy: 左手位置不變，作為劍的第三個端點。
• this.Rsx, this.Rsy: 右手位置加上劍的長度，作為劍的第四個端點。

完整代碼示例

以下是修改後的完整代碼示例，包含了player, leftHand, rightHand, 和sword 類的定義以及animate 函數。

 var c = document.getElementById("canvas");
var ctx = c.getContext("2d");

c.width = window.innerWidth;
c.height = window.innerHeight;

var mouse = { x: c.width / 2, y: c.height / 2 };

window.addEventListener("resize", function (event) {
  c.width = window.innerWidth;
  c.height = window.innerHeight;
});

window.addEventListener("mousemove", function (event) {
  mouse.x = event.clientX;
  mouse.y = event.clientY;
});

class player {
  constructor(x, y, r, color, v) {
    this.x = x;
    this.y = y;
    this.r = r;
    this.v = v;
    this.color = color;
    this.swordLength = 200;
  }

  draw() {
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI, false);
    ctx.fillStyle = this.color;
    ctx.fill();
    ctx.closePath();
  }

  update() {
    this.draw();
    var dy = mouse.y - this.y;
    var dx = mouse.x - this.x;
    const angle = Math.atan2(dy, dx);

    var vx = Math.cos(angle) * this.v;
    var vy = Math.sin(angle) * this.v;

    if (Math.abs(vx) > Math.abs(dx)) {
      vx = dx;
    }

    if (Math.abs(vy) > Math.abs(dy)) {
      vy = dy;
    }
    this.x = vx;
    this.y = vy;
  }
}

class leftHand {
  constructor(x, y, r, color) {
    this.x = x;
    this.y = y;
    this.color = color;
    this.angle = 0;
    this.r = r;
    this.Area = 40;
  }

  draw() {
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI, false);
    ctx.fillStyle = this.color;
    ctx.fill();
    ctx.closePath();
  }

  update() {
    this.draw();
    this.x = Player.x this.Area * Math.cos(this.angle / 180);
    this.y = Player.y this.Area * Math.sin(this.angle / 180);
    this.angle = 30;
  }
}

class rightHand {
  constructor(x, y, r, color) {
    this.x = x;
    this.y = y;
    this.color = color;
    this.angle = 90;
    this.r = r;
    this.Area = 40;
  }

  draw() {
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI, false);
    ctx.fillStyle = this.color;
    ctx.fill();
    ctx.closePath();
  }

  update() {
    this.draw();
    this.x = Player.x this.Area * Math.cos(this.angle / 180);
    this.y = Player.y this.Area * Math.sin(this.angle / 180);
    this.angle = 30;
  }
}

class sword {
  constructor(Lx, Ly, Rx, Ry, color, Lsx, Lsy, Rsx, Rsy) {
    this.Lx = Lx;
    this.Ly = Ly;
    this.Rx = Rx;
    this.Ry = Ry;
    this.Lsx = Lsx;
    this.Lsy = Lsy;
    this.Rsx = Rsx;
    this.Rsy = Rsy;
    this.color = color;
  }

  draw() {
    ctx.beginPath();
    ctx.moveTo(this.Lx, this.Ly);
    ctx.lineTo(this.Rx, this.Ry);
    ctx.lineTo(this.Rsx, this.Rsy);
    ctx.lineTo(this.Lsx, this.Lsy);
    ctx.fillStyle = this.color;
    ctx.fill();
    ctx.closePath();
  }

  update() {
    this.draw();
    this.Lx = LeftHand.x;
    this.Ly = LeftHand.y;
    this.Rx = RightHand.x;
    this.Ry = RightHand.y;

    this.Lsx = LeftHand.x;
    this.Lsy = LeftHand.y;
    this.Rsx = RightHand.x Player.swordLength;
    this.Rsy = RightHand.y Player.swordLength;
  }
}

const Player = new player(c.width / 2, c.height / 2, 30, "blue", 10);

const LeftHand = new leftHand(
  c.width / 2 40 * Math.cos(0 / 180),
  c.height / 2 40 * Math.sin(0 / 180),
  10,
  "red"
);

const RightHand = new rightHand(
  c.width / 2 40 * Math.cos(90 / 180),
  c.height / 2 40 * Math.sin(90 / 180),
  10,
  "yellow"
);

const Sword = new sword(
  c.width / 2 40 * Math.cos(0 / 180),
  c.height / 2 40 * Math.sin(0 / 180),
  c.width / 2 40 * Math.cos(90 / 180),
  c.height / 2 40 * Math.sin(90 / 180),
  "black",
  c.width / 2 40 * Math.cos(0 / 180),
  c.height / 2 40 * Math.sin(0 / 180),
  c.width / 2 40 * Math.cos(90 / 180),
  c.height / 2 40 * Math.sin(90 / 180)
);

function animate() {
  requestAnimationFrame(animate);
  ctx.clearRect(0, 0, c.width, c.height);
  Player.update();
  LeftHand.update();
  RightHand.update();
  Sword.update();
}

animate();

HTML 代碼:

 


    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rotating Sword</title>


    <canvas id="canvas"></canvas>
    <script src="script.js"></script>

確保將JavaScript代碼保存到名為script.js 的文件中，並在HTML文件中引用它。

總結

通過修改Sword 類的update 方法，我們可以正確計算出劍的端點坐標，從而實現劍的旋轉效果。 關鍵在於理解坐標變換和如何根據角色手臂的位置和劍的長度計算出正確的端點坐標。 記住，canvas 坐標計算是實現複雜動畫的基礎。 掌握這些概念，你就可以創建更豐富的canvas動畫效果。

以上是獲取HTML Canvas中旋轉劍的坐標的詳細內容。更多資訊請關注PHP中文網其他相關文章！