It looks like your triangle isn't rotating as expected with mouse movement—let's break down the likely issues in your code and fix them.

Key Issues in Your Current Code #

1. Incorrect Angle Calculation Reference #

Your calculateAngle function uses this.startX as the origin, but this should be the center point of your triangle (not an arbitrary starting position). If this.startX isn't tied to the triangle's center, the angle will be calculated relative to the wrong point, making rotation look disjointed.

2. Missing Proper Rotation Setup in Render #

Your render function cuts off, but rotating a shape in place on Canvas requires a specific sequence of steps that you're likely missing:

• Translate the canvas origin to the shape's center
• Rotate the canvas by the calculated angle
• Draw the shape relative to the new origin (0,0)
• Reset the canvas transform so other elements aren't affected

3. Not Triggering Re-Render on Mouse Move #

You calculate the angle when the mouse moves, but if you don't call render() after updating this.angle, the canvas won't redraw with the new rotation—so the angle changes, but you never see the result.

Fixed Code Example #

Here's a corrected version of your code that addresses all these issues, with missing parts filled in properly:

// Assume these are defined in your project:
const canvas = document.getElementById('your-canvas-element');
const ctx = canvas.getContext('2d');

class TriangleRotator {
  constructor() {
    // Define triangle's center (adjust to your desired position)
    this.triangleCenter = { x: canvas.width / 2, y: canvas.height / 2 };
    this.triangleSize = 60; // Adjust size as needed
    this.angle = 0;
    
    this.binding();
    this.render(); // Initial render to show the triangle
  }

  calculateAngle(e) {
    if (!e) return;
    const rect = canvas.getBoundingClientRect();
    // Get mouse position relative to the canvas (not the window)
    const mouseX = e.clientX - rect.left;
    const mouseY = e.clientY - rect.top;
    
    // Calculate angle between triangle center and mouse position
    const deltaX = mouseX - this.triangleCenter.x;
    const deltaY = mouseY - this.triangleCenter.y;
    this.angle = Math.atan2(deltaY, deltaX);
  }

  binding() {
    window.addEventListener('mousemove', (e) => {
      this.calculateAngle(e);
      this.render(); // Trigger re-render every time angle updates
    });
  }

  render() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    
    // Save current canvas state to avoid messing up future draws
    ctx.save();
    
    // Move canvas origin to the triangle's center
    ctx.translate(this.triangleCenter.x, this.triangleCenter.y);
    
    // Rotate the canvas by our calculated angle
    ctx.rotate(this.angle);
    
    // Draw the triangle relative to the new origin (0,0)
    ctx.beginPath();
    ctx.moveTo(0, -this.triangleSize); // Top vertex
    ctx.lineTo(this.triangleSize * Math.cos(Math.PI * 2/3), this.triangleSize * Math.sin(Math.PI * 2/3)); // Bottom-right vertex
    ctx.lineTo(this.triangleSize * Math.cos(Math.PI * 4/3), this.triangleSize * Math.sin(Math.PI * 4/3)); // Bottom-left vertex
    ctx.closePath();
    ctx.fillStyle = '#e74c3c';
    ctx.fill();
    
    // Restore canvas to its original state
    ctx.restore();
  }
}

// Initialize the rotator
new TriangleRotator();

Explanation of Fixes #

• Angle Calculation: Now uses the triangle's center as the origin, so the angle accurately represents the direction from the triangle to the mouse.
• Render Sequence: The translate → rotate → draw → restore flow ensures the triangle rotates smoothly around its own center instead of drifting across the canvas.
• Re-Render on Mousemove: Calling this.render() inside the mousemove listener updates the canvas in real-time as the mouse moves.

Quick Checks to Verify #

• Ensure canvas and ctx are properly initialized and accessible in your class.
• Double-check that this.triangleCenter matches the actual center of your triangle (adjust the x/y values if you're drawing it in a different spot).
• If your triangle uses a different vertex setup, tweak the moveTo and lineTo coordinates to match your desired shape.

内容的提问来源于stack exchange，提问作者repetiy1983