Canvas跟随鼠标的Box不显示问题求助（纯JS/HTML/CSS）

Hey there! Let's figure out why your mouse-tracking info box isn't showing up correctly over your Canvas. I've run into similar issues building drawing tools before, so here are the most likely fixes tailored to your constraints (plain JS, no jQuery):

First, Let's Check the Basics #

1. Ensure Your Info Box Has the Right CSS

The box needs absolute positioning to follow the mouse, and it shouldn't block Canvas mouse events. Add this to your styles:

#mouseInfoBox {
  position: absolute;
  z-index: 100; /* Make sure it sits above the Canvas */
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid #333;
  padding: 4px 8px;
  font-size: 12px;
  pointer-events: none; /* Critical! Prevents the box from stealing mouse events */
  display: none; /* Hide until mouse enters Canvas */
}

Don't forget to add the box to your HTML (or create it dynamically in JS):

<canvas id="drawingCanvas" width="800" height="600"></canvas>
<div id="mouseInfoBox"></div>

2. Fix Mouse Coordinate Calculation

If your Canvas is positioned with margins, padding, or is scaled, raw clientX/clientY won't map correctly to Canvas internal coordinates. Use this helper to get accurate Canvas-relative positions:

function getCanvasRelativePos(canvas, evt) {
  const rect = canvas.getBoundingClientRect();
  return {
    x: Math.round(evt.clientX - rect.left),
    y: Math.round(evt.clientY - rect.top)
  };
}

3. Rework Your fnTrackMouse Function

Make sure you're binding the event to the Canvas, updating the box's position correctly, and populating its content properly. Here's a revised version:

const canvas = document.getElementById('drawingCanvas');
const infoBox = document.getElementById('mouseInfoBox');

// Replace these with your actual app variables
let currentColor = '#2ecc71';
let brushSize = 8;

function fnTrackMouse(evt) {
  const canvasPos = getCanvasRelativePos(canvas, evt);
  
  // Position the box slightly offset from the mouse to avoid blocking it
  infoBox.style.left = `${evt.clientX + 12}px`;
  infoBox.style.top = `${evt.clientY + 12}px`;
  
  // Update the box content
  infoBox.textContent = `Pos: (${canvasPos.x}, ${canvasPos.y}) | Color: ${currentColor} | Brush: ${brushSize}px`;
  
  // Ensure the box is visible
  infoBox.style.display = 'block';
}

// Bind the necessary events
canvas.addEventListener('mousemove', fnTrackMouse);
canvas.addEventListener('mouseenter', () => infoBox.style.display = 'block');
canvas.addEventListener('mouseleave', () => infoBox.style.display = 'none');

Common Pitfalls to Check #

• Forgot pointer-events: none: If you skip this, the box will intercept mouse events, and your Canvas won't receive mousemove updates.
• Incorrect z-index: If your Canvas has a higher z-index than the box, it'll be hidden behind the Canvas. The z-index: 100 in the CSS fixes this.
• Dynamic Element Creation: If you're creating the box in JS instead of HTML, make sure you append it to the DOM with document.body.appendChild(infoBox) after creating it.
• Scaled Canvas: If your Canvas is scaled (e.g., using CSS to set width: 100% instead of the Canvas's native width/height), you'll need to adjust the coordinate calculation to account for the scaling factor.

Give these changes a try—this should get your info box showing up and following the mouse correctly over your Canvas!

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