如何爲繪製的畫布形狀設置ID？

Question

我看到this問題，我不知道我可以如何設置每個圈子的ID並從JavaScript代碼和CSS代碼訪問它們？ （例如點擊）

Answer 1

您可以通過在繪製圓圈時定義點擊對象來解決此問題。

... 

// push circle info as objects: 
circles.push({ 
    id: i + "," + j, // some ID 
    x: x, 
    y: y, 
    radius: radius 
}); 

... 

然後：循環繪製圈（REF由@MonicaOlejniczak製造小提琴）內

• 通過對象添加一個單擊處理程序，以帆布
• 正確的鼠標位置
• 環發現如果（x，y）在圓圈內：

功能離子例如：

canvas.onclick = function(e) { 
    // correct mouse coordinates: 
    var rect = canvas.getBoundingClientRect(), // make x/y relative to canvas 
     x = e.clientX - rect.left, 
     y = e.clientY - rect.top, 
     i = 0, circle; 

    // check which circle: 
    while(circle = circles[i++]) { 
     context.beginPath(); // we build a path to check with, but not to draw 
     context.arc(circle.x, circle.y, circle.radius, 0, 2*Math.PI); 
     if (context.isPointInPath(x, y)) { 
      alert("Clicked circle: " + circle.id); 
      break; 
     } 
    } 
}; 

您可以選擇使用的數學，而不是isPointInPath()，但後者更簡單，就是爲了這個目的不夠快。

Modified version of the same fiddle

Answer 2

您不能在繪製到畫布的東西上設置標識。

該元素本身只是一個位圖，並不提供任何繪製對象的信息。

如果您需要與您需要手動保持對這裏的一切繪製的引用，或使用如「對象挑選」或者使用內置的hit regions系統畫布裏面的物品進行互動。