我是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);
}
答案 0 :(得分:0)
在画布的mousemove事件中,检查点到达x,y位置的鼠标。如果到达,请在画布的父级上添加一个弹出div,其位置为:absolute,坐标为点的坐标。