当鼠标悬停时，弹出包含画布上点坐标的标签

Pop up label containing coordinate of a dot on canvas when mouse hovers

本文关键字：坐标 标签 包含画 悬停 鼠标      更新时间：2023-09-26

我是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);
}

在canvas的mousmove事件中，检查鼠标是否到达点的x, y位置。如果达到，在画布的父元素上添加一个弹出式div, position: absolute和坐标作为点的坐标。

相关文章：