Get coordinates of a rotating rectangular sword in HTML Canvas

This article aims to solve the problem of drawing a rotating rectangular sword in HTML Canvas and getting its endpoint coordinates. By analyzing the existing code, the endpoint calculation method of the sword is clarified, and the modified sword.update() function is provided to ensure that the sword rotates with the character's arm. At the same time, it provides a complete runnable code example, which is convenient for developers to apply directly to their projects.

Drawing a rotating rectangle in HTML Canvas, especially weapons like swords, involves coordinate calculations and angle rotations. Here are the steps to get the coordinates of a rotating rectangular sword in Canvas and draw it correctly:

Understand the coordinate system

The coordinate system origin (0, 0) of Canvas is located in the upper left corner. The positive direction of the X-axis is to the right, and the positive direction of the Y-axis is to the down. All coordinate calculations are based on this origin.

Key code analysis and correction

There is a problem with the sword.update() function in the original code to calculate the endpoint coordinates of the sword, which leads to the incorrect drawing of the sword. The correct logic is:

• The position of the left hand is an end point of the sword.
• The right hand position is the other endpoint of the sword.
• The other two endpoints of the sword can be determined by adding Player.swordLength to the right-hand position.

Therefore, it is necessary to modify the sword.update() function as follows:

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

The key to this code is to correctly set the values ​​of Lsx, Lsy, Rsx and Rsy to ensure that the shape and rotation of the sword are consistent with the movement of the arm.

Complete code example

The following is a revised complete code example that can be copied and run directly:

 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 file:

 



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



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

Notes:

• Make sure that the HTML file is introduced.
• The width and height properties of the Canvas element should be set to the size of the window to make full use of screen space.
• Using requestAnimationFrame() in the animate() function can achieve smoother animation effects.

Summarize

By understanding the Canvas coordinate system and correctly calculating and updating the endpoint coordinates of the sword, the drawing of the rotating rectangular sword can be achieved. The key lies in the correction of the sword.update() function and ensuring that all coordinate calculations are based on the Canvas origin. In addition, the code example uses object-oriented programming ideas, defining characters, arms, and swords as classes, making the code structure clearer and easier to understand.

The above is the detailed content of Get coordinates of a rotating rectangular sword in HTML Canvas. For more information, please follow other related articles on the PHP Chinese website!