彈出標籤時鼠標懸停

我是新來的HTML和JavaScript和想實現一個功能，使得在畫布上，我可以通過點擊畫點，當我把鼠標在點之上，它會彈出一個包含點座標的標籤。我已經實現了繪製點部分，我只是無法弄清楚如何實現標籤彈出部分。彈出標籤時鼠標懸停

在HTML：

<div id="2" style="position:absolute; top:100px; left:10px;"> 
    <canvas id="canvas_prime" width="700" height="500"></canvas> 
</div>

在JS：

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

function drawDot(canvas) { 
    var context = canvas.getContext("2d"); 

    context.beginPath(); 
    context.arc(mouseX * 50, mouseY * 50, 4, 0, 2 * Math.PI, false); 

    context.fillStyle = 'green'; 
    context.fill(); 

    context.lineWidth = 1; 
    context.strokeStyle = 'yellow'; 
    context.stroke(); 

    drawLine_passive(canvas); 
}

來源

2014-05-05 photosynthesis

做一些展示你的代碼，如果有必要清洗，所以我們有一些工作的。 – icedwater

@icedwater我已經更新了代碼，謝謝。 – photosynthesis

在畫布上的鼠標移動事件，請檢查您點的x，y位置達到了鼠標。如果到達，在畫布的父級上添加一個彈出式div，其位置爲：absolute，座標爲點的座標。

來源

2014-05-05 05:17:21 sap

彈出標籤時鼠標懸停

回答

相關問題