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

【问题标题】：Pop up label containing coordinate of a dot on canvas when mouse hovers鼠标悬停时弹出包含画布上点坐标的标签
【发布时间】：2014-05-05 00:45:20
【问题描述】：

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

【问题讨论】：

显示您的一些代码，必要时进行清理，这样我们就有了工作要做。
@icedwater 我已经更新了代码，谢谢。

标签： javascript html canvas html5-canvas

【解决方案1】：

在画布的 mousemove 事件中，检查鼠标是否到达点的 x、y 位置。如果达到，请在画布的父级上附加一个弹出 div，其中 position: absolute 和坐标作为点的坐标。

【讨论】：