如何處理HTML5畫布上的鼠標事件？

要正確處理HTML5 canvas上的鼠標事件，首先需給canvas添加事件監聽器，然後計算鼠標相對於canvas的坐標，接著通過幾何檢測判斷是否與繪製的對象交互，最後實現如拖拽等交互模式。 1. 使用addEventListener為canvas綁定mousedown、mousemove、mouseup和mouseleave事件；2. 利用getBoundingClientRect方法將clientX/clientY轉換為相對於canvas的坐標；3. 通過手動幾何計算（如矩形邊界或圓的距離公式）檢測鼠標是否懸停在繪製的圖形上；4. 維護一個包含所有圖形的對像數組，在鼠標事件中判斷選中並更新位置，結合redraw函數重繪畫面；必須始終手動追踪圖形狀態並在交互後重繪canvas，才能實現完整交互，這是一個從零構建但控制靈活的過程。

Handling mouse events on an HTML5 canvas requires a slightly different approach compared to regular DOM elements because the canvas is treated as a single element — all drawing happens within it, but the interactions must be manually mapped to positions in the drawing space.

Here's how to properly handle mouse events on a canvas:

1. Attach Event Listeners to the Canvas

First, get a reference to the canvas element and attach standard mouse event listeners such as mousedown , mousemove , mouseup , and mouseleave .

 const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

canvas.addEventListener('mousedown', handleMouseDown);
canvas.addEventListener('mousemove', handleMouseMove);
canvas.addEventListener('mouseup', handleMouseUp);
canvas.addEventListener('mouseleave', handleMouseLeave);

2. Get Mouse Position Relative to the Canvas

The default clientX and clientY from mouse events are relative to the viewport, not the canvas. You need to convert them to coordinates relative to the canvas, especially if your canvas is positioned or scaled.

Use getBoundingClientRect() to get accurate positioning:

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

Now use this inside your event handlers:

 function handleMouseMove(event) {
    const mousePos = getMousePos(canvas, event);
    console.log('Mouse at:', mousePos.x, mousePos.y);
}

This is essential for detecting if the mouse is over a shape you've drawn.

3. Detect Interaction with Drawn Objects

Since the canvas doesn't track individual shapes, you have to manually check if the mouse is over a drawn object by using geometric checks.

For example, to detect if the mouse is over a rectangle:

 function isInsideRect(mouseX, mouseY, rectX, rectY, width, height) {
    return mouseX >= rectX && mouseX <= rectX width &&
           mouseY >= rectY && mouseY <= rectY height;
}

// Usage in event handler
function handleMouseMove(event) {
    const mousePos = getMousePos(canvas, event);
    const hovering = isInsideRect(mousePos.x, mousePos.y, 50, 50, 100, 100);
    console.log(&#39;Over rectangle:&#39;, hovering);
}

For circles, use distance formula:

 function isInsideCircle(mouseX, mouseY, centerX, centerY, radius) {
    const dx = mouseX - centerX;
    const dy = mouseY - centerY;
    return Math.sqrt(dx*dx dy*dy) <= radius;
}

You'll need to keep track of all drawn objects in an array or data structure to loop through them during hit detection.

4. Handle Common Interaction Patterns

Here's a practical example using drag-and-drop on a rectangle:

 let isDragging = false;
let selectedShape = null;

const shapes = [
    { type: 'rect', x: 50, y: 50, w: 100, h: 80, color: 'blue' },
    { type: 'circle', x: 200, y: 100, r: 30, color: 'green' }
];

function handleMouseDown(event) {
    const mousePos = getMousePos(canvas, event);

    // Check shapes in reverse order (topmost first)
    for (let i = shapes.length - 1; i >= 0; i--) {
        const shape = shapes[i];
        if (shape.type === 'rect') {
            if (isInsideRect(mousePos.x, mousePos.y, shape.x, shape.y, shape.w, shape.h)) {
                isDragging = true;
                selectedShape = shape;
                break;
            }
        } else if (shape.type === 'circle') {
            if (isInsideCircle(mousePos.x, mousePos.y, shape.x, shape.y, shape.r)) {
                isDragging = true;
                selectedShape = shape;
                break;
            }
        }
    }
}

function handleMouseMove(event) {
    if (!isDragging || !selectedShape) return;

    const mousePos = getMousePos(canvas, event);

    // Move the shape
    if (selectedShape.type === 'rect') {
        selectedShape.x = mousePos.x - selectedShape.w / 2;
        selectedShape.y = mousePos.y - selectedShape.h / 2;
    } else if (selectedShape.type === 'circle') {
        selectedShape.x = mousePos.x;
        selectedShape.y = mousePos.y;
    }

    // Redraw canvas
    redraw();
}

function handleMouseUp() {
    isDragging = false;
    selectedShape = null;
}

function handleMouseLeave() {
    isDragging = false;
    selectedShape = null;
}

function redraw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    shapes.forEach(shape => {
        if (shape.type === 'rect') {
            ctx.fillStyle = shape.color;
            ctx.fillRect(shape.x, shape.y, shape.w, shape.h);
        } else if (shape.type === 'circle') {
            ctx.beginPath();
            ctx.arc(shape.x, shape.y, shape.r, 0, Math.PI * 2);
            ctx.fillStyle = shape.color;
            ctx.fill();
        }
    });
}

// Initial draw
redraw();

Key Points to Remember

• The canvas does not inherently know about drawn content — you must track objects and their positions.
• Always use getBoundingClientRect() for accurate mouse positioning.
• Redraw the canvas after state changes (like dragging).
• For better performance with many objects, consider spatial indexing (like quadtrees) for hit detection.
• Touch events require similar handling using touchstart , touchmove , etc., with touch coordinates.

Basically, you're building interaction logic from scratch, but once set up, it gives you full control over 2D graphics interactions.

以上是如何處理HTML5畫布上的鼠標事件？的詳細內容。更多資訊請關注PHP中文網其他相關文章！