Holen Sie sich Koordinaten des rotierenden Schwertes in HTML -Leinwand

Dieser Artikel zielt darauf ab, das Problem des Zeichnens eines Schwertes zu lösen, das sich mit einem Charakter in HTML -Leinwand dreht. Durch Analyse der Position des Arms des Charakters und der Kombination der Länge des Schwertes werden die Koordinaten der vier Endpunkte des Schwertes berechnet, wodurch die Wirkung des Schwertes mit dem Arm des Charakters gedreht wird. Dieser Artikel enthält detaillierte Code -Beispiele und -erklärungen, mit denen Entwickler diese Funktion verstehen und implementieren können.

In HTML -Leinwand, um den Effekt eines Charakters zu erreichen, das ein rotierendes Schwert hält, ist der Schlüssel, wie die Endpunktkoordinaten des Schwertes dynamisch berechnet werden, basierend auf der Armposition des Charakters. Das Folgende erläutert ausführlich, wie dieser Effekt erzielt werden kann.

Bestimmen Sie den Endpunkt des Schwertes

Zunächst müssen wir die vier Endpunkte des Schwertes bestimmen: den linken Startpunkt (LX, LY), den rechten Startpunkt (RX, RY), den linken Erweiterungspunkt (LSX, LSY) und den rechten Erweiterungspunkt (RSX, RSY). Die Ausgangspunkte der linken und rechten Hände entsprechen den Positionen der linken und rechten Hände des Charakters, während die Verlängerungspunkte basierend auf dem Startpunkt zuzüglich der Länge des Schwertes berechnet werden.

Code -Implementierung

Basierend auf dem ursprünglichen Code müssen wir die Methode der update () der Schwertklasse ändern, um die Endpunktkoordinaten des Schwertes korrekt zu berechnen.

 Klassenschwert {
  Konstruktor (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;
  }

  ziehen() {
    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 ();
  }

  aktualisieren() {
    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;
  }
}

In der update () -Methode haben wir zuerst LX und LY auf lfthand.x und lefthand.y sowie rx und ry auf righthand.x und righthand.y gesetzt. Dann sind LSX und LSY auf lfthand.x und lfthand.y eingestellt.

Vollständiger Codebeispiel

Hier ist ein geändertes Beispiel für den vollständigen Code:

 var c = document.getElementById ("canvas");
var ctx = C.GetContext ("2D");

C.Width = Fenster.innernwidth;
C.Height = Fenster.InnerHeight;

var maus = {x: c.width / 2, y: c.Height / 2};

window.adDeVentListener ("Größe", Funktion (Ereignis) {
  C.Width = Fenster.innernwidth;
  C.Height = Fenster.InnerHeight;
});

window.addeventListener ("Mousemove", Funktion (Ereignis) {
  maus.x = event.clientX;
  maus.y = event.clienty;
});

Klassenspieler {
  Konstruktor (x, y, r, Farbe, v) {
    this.x = x;
    this.y = y;
    this.r = r;
    this.v = v;
    this.color = color;
    this.swordLength = 200;
  }

  ziehen() {
    ctx.beginPath ();
    ctx.arc (this.x, this.y, this.r, 0, 2 * math.pi, false);
    ctx.FillStyle = this.color;
    ctx.fill ();
    ctx.closepath ();
  }

  aktualisieren() {
    this.draw ();
    var dy = maus.y - this.y;
    var dx = maus.x - this.x;
    const angle = math.atan2 (dy, dx);

    var vx = math.cos (Winkel) * this.v;
    var vy = math.sin (Winkel) * 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;
  }
}

Klasse litthand {
  Konstruktor (x, y, r, Farbe) {
    this.x = x;
    this.y = y;
    this.color = color;
    this.angle = 0;
    this.r = r;
    this.area = 40;
  }

  ziehen() {
    ctx.beginPath ();
    ctx.arc (this.x, this.y, this.r, 0, 2 * math.pi, false);
    ctx.FillStyle = this.color;
    ctx.fill ();
    ctx.closepath ();
  }

  aktualisieren() {
    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;
  }
}

Klasse righthand {
  Konstruktor (x, y, r, Farbe) {
    this.x = x;
    this.y = y;
    this.color = color;
    this.angle = 90;
    this.r = r;
    this.area = 40;
  }

  ziehen() {
    ctx.beginPath ();
    ctx.arc (this.x, this.y, this.r, 0, 2 * math.pi, false);
    ctx.FillStyle = this.color;
    ctx.fill ();
    ctx.closepath ();
  }

  aktualisieren() {
    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;
  }
}

Klassenschwert {
  Konstruktor (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;
  }

  ziehen() {
    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 ();
  }

  aktualisieren() {
    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 = neuer Spieler (C. Gwidth / 2, C.Height / 2, 30, "Blue", 10);

const lfthand = neuer lfthand (
  C. Width / 2 40 * Math.Cos (0/180),
  C.Height / 2 40 * Math.sin (0/180),
  10,,
  "Rot"
);

const righthand = neuer righthand (
  C. Width / 2 40 * Math.Cos (90/180),
  C.Height / 2 40 * Math.sin (90/180),
  10,,
  "Gelb"
);

const Sword = neues Schwert (
  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),
  "Schwarz",
  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)
);

Funktion animate () {
  RequestAnimationFrame (Animate);
  ctx.clearRect (0, 0, C. Width, C.Height);
  Player.Update ();
  Lfthand.update ();
  Righthand.update ();
  SWORD.UPDATE ();
}

animieren();

HTML -Datei:

 

<kopf>
    <meta charset="utf-8">
    <meta name="viewPort" content="width = Gerätebreite, initial-scale = 1,0">
    <title> Canvas -Schwert </title>
    <styles>
        Körper {
            Rand: 0;
            Überlauf: versteckt; / * Verhindern Sie Scrollbars */
        }
        Leinwand {
            Anzeige: Block; / * Entfernen Sie den zusätzlichen Platz unter der Leinwand *//
        }
    


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

</styles></kopf>

Das obige ist der detaillierte Inhalt vonHolen Sie sich Koordinaten des rotierenden Schwertes in HTML -Leinwand. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!