要處理canvas 上的鼠標(biāo)事件，需手動(dòng)監(jiān)聽並結(jié)合坐標(biāo)判斷觸發(fā)區(qū)域。 1. 獲取鼠標(biāo)位置時(shí)需將clientX 和clientY 轉(zhuǎn)換為canvas 內(nèi)部坐標(biāo)，公式為x = e.clientX - rect.left，y = e.clientY - rect.top；2. 若有縮放或transform 樣式，需對坐標(biāo)相應(yīng)調(diào)整；3. 判斷是否點(diǎn)擊圖形需預(yù)先記錄圖形信息並在點(diǎn)擊時(shí)檢測坐標(biāo)是否落在對應(yīng)區(qū)域內(nèi)；4. 實(shí)現(xiàn)hover 效果可監(jiān)聽mousemove 並清空重繪canvas 或使用雙緩衝技術(shù)；5. 注意移動(dòng)端需用touch 事件替代hover，且要考慮性能優(yōu)化與縮放適配問題。

處理canvas 上的鼠標(biāo)事件其實(shí)並不復(fù)雜，但需要理解幾個(gè)關(guān)鍵點(diǎn)。 Canvas 本身只是一個(gè)位圖畫布，它不像DOM 元素那樣自帶交互能力。所以要讓canvas 響應(yīng)鼠標(biāo)點(diǎn)擊、懸停等行為，你需要手動(dòng)監(jiān)聽事件，並結(jié)合坐標(biāo)判斷觸發(fā)區(qū)域。

獲取鼠標(biāo)在canvas 上的位置

瀏覽器提供的鼠標(biāo)事件對像中的clientX和clientY是相對於視口的坐標(biāo)，而你要判斷的是在canvas 內(nèi)部的具體位置，所以需要做一次轉(zhuǎn)換。

 const canvas = document.getElementById('myCanvas');
const rect = canvas.getBoundingClientRect();

canvas.addEventListener('mousedown', (e) => {
  const x = e.clientX - rect.left;
  const y = e.clientY - rect.top;
  console.log(`鼠標(biāo)點(diǎn)擊位置：x=${x}, y=${y}`);
});

注意幾點(diǎn)：

• 如果canvas 有縮放或transform 樣式，比如CSS 的scale() ，那坐標(biāo)也需要相應(yīng)調(diào)整。
• 移動(dòng)端的觸摸事件需要單獨(dú)處理，可以用touchstart等事件模擬。

判斷鼠標(biāo)是否點(diǎn)擊了某個(gè)圖形

由於canvas 沒有內(nèi)置的“點(diǎn)擊某圖形”的功能，你需要自己記錄繪製內(nèi)容的信息（比如位置、形狀），然後根據(jù)鼠標(biāo)坐標(biāo)判斷是否落在該區(qū)域內(nèi)。

以矩形為例：

 const rectData = { x: 50, y: 50, width: 100, height: 100 };

canvas.addEventListener('mousedown', (e) => {
  const mouseX = e.clientX - rect.left;
  const mouseY = e.clientY - rect.top;

  if (
    mouseX >= rectData.x &&
    mouseX <= rectData.x rectData.width &&
    mouseY >= rectData.y &&
    mouseY <= rectData.y rectData.height
  ) {
    console.log(&#39;點(diǎn)擊了矩形&#39;);
  }
});

如果你畫了多個(gè)圖形，建議維護(hù)一個(gè)圖形列表，每個(gè)圖形保存其邊界信息或者路徑，這樣每次點(diǎn)擊時(shí)可以遍歷判斷。

實(shí)現(xiàn)hover 效果或?qū)崟r(shí)反饋

實(shí)現(xiàn)hover 的關(guān)鍵是監(jiān)聽mousemove事件，並不斷檢測當(dāng)前鼠標(biāo)位置是否在目標(biāo)區(qū)域內(nèi)。

你可以：

• 每次移動(dòng)都清空canvas 並重繪（適合簡單場景）
• 或者使用雙緩衝技術(shù)，在離屏canvas 上繪製狀態(tài)變化部分（適合複雜場景）

示例邏輯如下：

 canvas.addEventListener('mousemove', (e) => {
  const x = e.clientX - rect.left;
  const y = e.clientY - rect.top;

  // 清除之前的繪製ctx.clearRect(0, 0, canvas.width, canvas.height);

  // 重新繪製所有圖形drawAllShapes();

  // 如果鼠標(biāo)在圖形上，添加高亮效果if (isMouseOverShape(x, y)) {
    drawHighlight();
  }
});

這種方式雖然效率不如DOM 高，但在圖形不多的情況下完全夠用。

小技巧和注意事項(xiàng)

• 保持圖形數(shù)據(jù)結(jié)構(gòu)清晰：不要只靠圖像判斷交互，應(yīng)該用數(shù)據(jù)記錄圖形信息。
• 性能優(yōu)化：如果圖形很多，頻繁重繪會(huì)影響性能，可以考慮局部更新或使用offscreen canvas。
• 兼容性問題：移動(dòng)端沒有hover，要用touch 相關(guān)事件替代。
• 縮放適配：如果頁面用了高清方案（如rem、dpr），記得也要對canvas 的尺寸進(jìn)行處理。

基本上就這些。雖然canvas 不像HTML 元素那樣天生支持交互，但只要掌握了坐標(biāo)映射和圖形判斷方法，就可以靈活實(shí)現(xiàn)各種鼠標(biāo)響應(yīng)功能。

以上是如何處理畫布上的鼠標(biāo)事件？的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！