获取 HTML Canvas 中旋转剑的坐标

本文旨在解决在 HTML Canvas 中绘制一个随角色旋转的剑的问题。通过分析角色手臂的位置，并结合剑的长度，计算出剑的四个端点坐标，从而实现剑随角色手臂旋转的效果。本文将提供详细的代码示例和解释，帮助开发者理解并实现这一功能。

在 HTML Canvas 中，要实现一个角色手持旋转的剑的效果，关键在于如何根据角色的手臂位置动态计算出剑的端点坐标。以下将详细讲解如何实现这个效果。

确定剑的端点

首先，我们需要确定剑的四个端点：左手起始点 (Lx, Ly)，右手起始点 (Rx, Ry)，左手延伸点 (Lsx, Lsy)，右手延伸点 (Rsx, Rsy)。 左手和右手起始点分别对应角色左手和右手的位置，而延伸点则基于起始点加上剑的长度计算得出。

代码实现

在原代码的基础上，我们需要修改 sword 类的 update() 方法，以正确计算剑的端点坐标。

立即学习“前端免费学习笔记（深入）”；

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;
}
}

在 update() 方法中，我们首先将 Lx 和 Ly 设置为 LeftHand.x 和 LeftHand.y，将 Rx 和 Ry 设置为 RightHand.x 和 RightHand.y。 然后，Lsx 和 Lsy 设置为 LeftHand.x 和 LeftHand.y，Rsx 设置为 RightHand.x + Player.swordLength，Rsy 设置为 RightHand.y + Player.swordLength。

完整代码示例

以下是修改后的完整代码示例：

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文件：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Canvas Sword</title>
<style>
body {
margin: 0;
overflow: hidden; /* Prevent scrollbars */
}
canvas {
display: block; /* Remove extra space below canvas */
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script src="https://www.php.cn/faq/canvas.js"></script>
</body>
</html>

注意事项:

• 确保 HTML 文件正确引用 JavaScript 文件。
• 根据实际需求调整角色和剑的属性，例如颜色、长度等。
• 可以进一步优化代码，例如使用更高效的算法来计算坐标，或者添加更多的动画效果。

总结

通过修改 sword 类的 update() 方法，我们可以根据角色手臂的位置动态计算出剑的端点坐标，从而实现剑随角色手臂旋转的效果。 关键在于理解如何利用左右手的位置和剑的长度来确定剑的四个端点。 这个方法可以应用于更复杂的动画效果中，例如添加剑的攻击动作等。