突出顯示在HTML畫布中點擊的圖點

Question

我目前有一個HTML頁面，在canvas元素內產生一個線條圖。我還實現了一個功能，以便當您單擊圖形中的某個點時，畫布下方的表格將顯示該圖形點的信息，並在您單擊畫布上不是圖形點的某個位置時清除。但是，目前沒有指示您選擇的圖表點。

我想使它點擊點或者變大或突出顯示，或者其他東西。不幸的是，我不認爲認爲有任何方法可以在一個畫布上做到這一點，而無需事後重繪整個圖形。如果我在原稿上繪製了一個更大的點，則需要將其刪除並用較小的點替換，並重新繪製較大點所覆蓋的線條圖的線段。

我正在尋找使用第一個具有相同尺寸的第一個畫布，使用z-index來控制哪個位於頂部。但是，我不知道這將如何影響點擊事件。如果兩個畫布彼此重疊，則點擊事件是否可以註冊較低的畫布？它只註冊較高的一個嗎？我想我可以將點擊事件更改爲頂部的任何一個畫布，但保留所有在畫布上繪製的代碼相同。

有關如何解決此問題的任何建議？

Answer 1

解決了我自己的一些問題。

首先，點擊事件只會識別頂部的任何一個畫布。不過，我的確喜歡我說過的，並且將我的點擊事件更改爲頂部畫布，而將裏面的所有說明留給頂部畫布。謝天謝地，我沒有使用'this'這個關鍵字，或者這個改變會讓人煩惱得多。

爲了突出顯示圖形點，我首先在第一個圖形的頂部添加了第二個圖形，將它們放在彼此的頂部，方法是將它們的位置設置爲「絕對」並分別給出0和1的z-索引。然後，在原始點擊事件識別點被點擊的if語句中，我告訴頂部畫布在與第一個點（我保存在數組中）相同的座標上繪製一個更大的點。首先，我已經清楚了頂部畫布，所以其他突出顯示的點將不再突出顯示。如果畫布在點以外的其他位置點擊，則不會突出顯示。