文章 专题 AI工具 学习 下载 问答 源码 最近更新
PHP
会员中心 讲师中心 微信公众号
首页 > web前端 > html教程 > 正文

获取HTML Canvas中旋转矩形剑的坐标

花韻仙語
发布： 2025-08-23 10:52:31
原创
217人浏览过

获取html canvas中旋转矩形剑的坐标

本文旨在解决HTML Canvas中绘制旋转矩形剑，并获取其端点坐标的问题。通过分析现有代码，明确了剑的端点计算方式，并提供了修正后的sword.update()函数，确保剑随角色手臂旋转，同时提供了完整的可运行代码示例，方便开发者直接应用到自己的项目中。

在HTML Canvas中绘制旋转的矩形，特别是像剑这样的武器，涉及到坐标计算和角度旋转。以下是如何获取Canvas中旋转矩形剑的坐标并正确绘制它的步骤：

理解坐标系统

Canvas的坐标系统原点(0, 0)位于左上角。X轴正方向向右，Y轴正方向向下。所有坐标计算都基于这个原点。

关键代码分析与修正

原代码中sword.update()函数计算剑的端点坐标存在问题，导致剑的绘制不正确。正确的逻辑是：

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

  • 左手的位置是剑的一个端点。
  • 右手的位置是剑的另一个端点。
  • 剑的另外两个端点可以通过在右手位置的基础上，增加Player.swordLength来确定。

因此，需要修改sword.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;
  }
登录后复制

这段代码的关键在于正确设置了Lsx、Lsy、Rsx和Rsy的值，确保剑的形状和旋转与手臂的运动保持一致。

完整代码示例

以下是修正后的完整代码示例，可以直接复制并运行：

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 http-equiv="X-UA-Compatible" content="IE=edge">
  <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>
    // JavaScript code from previous response goes here
    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();
  </script>
</body>

</html>
登录后复制

注意事项:

  • 确保HTML文件中引入了JavaScript文件。
  • Canvas元素的width和height属性应设置为窗口的尺寸，以充分利用屏幕空间。
  • 在animate()函数中使用requestAnimationFrame()可以实现更流畅的动画效果。

总结

通过理解Canvas坐标系统，并正确计算和更新剑的端点坐标，可以实现旋转矩形剑的绘制。关键在于sword.update()函数的修正，以及确保所有坐标计算都基于Canvas原点。 此外，代码示例中使用了面向对象的编程思想，将角色、手臂和剑都定义为类，使得代码结构更加清晰易懂。

以上就是获取HTML Canvas中旋转矩形剑的坐标的详细内容，更多请关注php中文网其它相关文章！

HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！

下载
相关标签：
cos overflow red JavaScript html 面向对象 对象 canvas
来源：php中文网
收藏 点赞
上一篇：获取HTML Canvas中旋转剑的坐标 下一篇：jQuery 如何定位子元素并实现“显示更多”功能
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
最新问题
使用JavaScript FormData API高效收集表单数据 本教程将深入探讨如何利用JavaScript的FormDataAPI高效地从HTML表单中收集所有输入数据。告别逐个元素选择的繁琐，FormData提供了一种简洁且标准化的方法，将表单字段及其值封装成一个可迭代的对象。文章将详细介绍如何创建FormData对象，访问和遍历其数据，并提供实用的代码示例，帮助开发者轻松实现表单数据的收集、处理和后续应用，从而优化Web表单的交互逻辑。
2025-08-25 21:18:02
387
使用JavaScript FormData API高效收集HTML表单数据 本文详细介绍了如何利用JavaScript的FormDataAPI高效地从HTML表单中收集数据，避免了逐个元素查询的繁琐。我们将学习如何实例化FormData对象，遍历并获取表单字段的值，以及将其存储或用于后续处理，从而简化前端数据收集流程。
2025-08-25 21:06:05
444
React中FontAwesome图标的正确集成：CDN与NPM包的选择与实践 本文旨在解决React应用中FontAwesome图标不显示的问题，核心在于明确FontAwesome的两种主要集成方式——CDN引入与NNPM包（@fortawesome/react-fontawesome）引入——并强调避免混用。教程将详细指导如何根据项目需求选择并正确实践其中一种方法，提供示例代码，确保图标正常显示，并避免不必要的错误。
2025-08-25 20:56:20
508
使用 JavaScript 从表单收集数据并存储到变量中 本文将介绍如何使用JavaScript的FormData对象，高效地从HTML表单中收集数据，并将其存储到变量中以便后续使用。通过示例代码和详细解释，您将学会如何简化表单数据处理流程，避免繁琐的单个元素选择和赋值操作。
2025-08-25 20:50:18
148
jQuery中动态生成按钮的事件委托与属性获取指南 本教程详细阐述了在jQuery中如何有效地处理动态添加到DOM的按钮事件。针对传统事件绑定对动态元素无效的问题，文章重点介绍了事件委托机制，并演示了如何利用$(document).on()方法监听动态按钮的点击事件，以及在事件回调中准确获取被点击按钮的ID和值等属性。
2025-08-25 19:20:16
866
JavaScript中避免重复使用document.write()的方法与技巧 本文旨在解决JavaScript中使用document.write()时，需要重复书写该方法的问题。通过使用模板字符串和自定义函数两种方法，可以有效简化代码，提高可读性和开发效率。同时，文章还强调了在使用这些方法时需要注意的细节，例如标签名称的大小写和字符串引号的使用。
2025-08-25 18:42:16
277
利用HTML、CSS和JavaScript实现客户端图片裁剪功能指南 本教程将详细介绍如何利用HTML、CSS和JavaScript，特别是通过Croppie.js库，在网页中实现交互式客户端图片裁剪功能。文章将涵盖从构建基本HTML结构、应用CSS样式到编写JavaScript逻辑的完整过程，旨在帮助开发者轻松集成图片上传、预览及自定义裁剪功能，从而优化用户体验并满足特定图片尺寸需求。
2025-08-25 18:26:29
272
JavaScript document.write() 高效内容注入策略 本文探讨了在JavaScript中使用document.write()插入HTML和文本时避免重复调用的方法。主要介绍两种高效策略：利用ES6模板字面量实现多行内容一次性写入，以及通过封装自定义函数简化调用。同时，强调了HTML标签大小写和字符串引号使用的重要注意事项，以确保代码的健壮性和可维护性。
2025-08-25 18:24:17
684
使用 JavaScript 高效输出 HTML 内容 本文介绍了在JavaScript中避免重复使用document.write()输出HTML内容的几种方法，包括使用模板字符串和自定义函数。通过这些技巧，可以简化代码，提高可读性，并避免常见的引号和标签大小写错误，从而更高效地生成动态网页内容。
2025-08-25 18:02:26
330
JavaScript document.write 多行内容输出优化实践 本文探讨了在JavaScript中使用document.write输出多行HTML或文本时，如何避免重复书写document.write()的问题。通过介绍模板字面量（TemplateLiterals）和自定义辅助函数两种主要方法，旨在提升代码的简洁性和可维护性，并提供使用时的注意事项，帮助开发者更高效地管理页面内容的动态生成。
2025-08-25 17:54:17
1004
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
app下载
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 //m.sbmmt.com/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部