Javascript html5画布工具提示仅对上次绘制的对象可见，而对以前的对象不可见

我真正想要实现的是

在画布上绘制对象的步骤

鼠标悬停时，在工具提示中显示相关数据

您可以查看代码

var canvasBack；
var画布标签；
var拉票；
var-ctxBack；
var-ctxLabel；
var-ctxDraw；
var last_mousex=0；
var last_mousey=0；
var-mousex=0；
var-mousey=0；
可变宽度；
高度；
var标度参数；
变异半径；
var xVertex；
var yVertex；
var热点=[]；
//画布加载时的初始化
$（'canvas'）.ready（函数（）{
init（）；
});
//用于绑定事件的初始化函数，并实现初始逻辑。
函数init（）{
标度参数=1；
canvasBack=document.getElementById（'backSpace'）；
canvasLabel=document.getElementById（'layerCanvas'）；
canvasDraw=document.getElementById（'drawSpace'）；
ctxBack=canvasBack.getContext（'2d'）；
ctxLabel=canvasLabel.getContext（'2d'）；
ctxDraw=canvasDraw.getContext（'2d'）；
canWidth=parseInt（$（canvasBack）.attr（'width'）；
canHeight=parseInt（$（canvasBack）.attr（'height'）；
var canvasx=$（canvasBack）.offset（）.left；
var canvasy=$（canvasBack）.offset（）.top
var mousedown=false；
//穆斯敦
$（'canvas'）。在（'mousedown'，函数（e）上{
$（'#drawSpace'）.css（'display'，'block'）；
last_mousex=mousex=parseInt（e.clientX-canvasx）；
last_mousey=mousey=parseInt（e.clientY-canvasy）；
mousedown=true；
});
//鼠标
$（'canvas'）。on（'mouseup'，函数（e）{
热点推送({
x:xVertex，
y:yVertex，
半径：半径，
小贴士：“你已经超过了“+mousex+”、“+mousey”
});
设cw=canvasBack.width；
设ch=画布背面高度；
ctxBack.drawImage（canvasDraw，0，0，cw，ch）；
$（'#drawSpace'）.css（'display'，'none'）；
mousedown=false；
});
//鼠标移动
$（'canvas'）。在（'mousemove'，函数（e）上{
mousex=parseInt（e.clientX-canvasx）；
mousey=parseInt（例如clientY-canvasy）；
如果（鼠标向下）{
//绘制（鼠标向下）；
抽屉（最后一只老鼠，最后一只老鼠，老鼠，老鼠）；
}否则{
鼠标悬停工具提示（）；
}
});
}
功能抽屉（x1，y1，x2，y2）{
var leftScroll=$（“#scrollParent”）.scrollLeft（）；
var topScroll=$（“#scrollParent”）.scrollTop（）；
设cw=canvasBack.width；
设ch=画布背面高度；
clearRect（0，0，cw，ch）；
变量半径x=x2-x1，
半径y=y2-y1，
中心x=x1+半径x，
中心Y=y1+半径Y，
阶跃=0.01，
a=步骤，
pi2=Math.PI*2-步；
半径=数学sqrt（半径x*半径x+半径y*半径y）/2；
ctxDraw.beginPath（）；
ctxDraw.arc（centerX，centerY，radius，0，2*Math.PI，true）；
ctxDraw.closePath（）；
ctxDraw.fillStyle='绿色'；
ctxDraw.fill（）；
ctxDraw.strokeStyle='#000'；
ctxDraw.stroke（）；
x顶点=中心x；
yVertex=中心；
}
//悬停在对象上时显示的工具提示
函数hoverTooltip（）{
var leftScroll=$（“#scrollParent”）.scrollLeft（）；
var topScroll=$（“#scrollParent”）.scrollTop（）；
设cw=canvasBack.width；
设ch=画布背面高度；
对于（var i=0；i

#滚动父对象{
宽度：644px；
高度：364px；
溢出：自动；
位置：相对位置；
}
#滚动父项>画布{
位置：绝对位置；
左：0；
排名：0；
边框：1px实心#阿巴巴；
}
#退格{
z指数：0；
}
#游隙{
显示：无；
z指数：1；
}
#层孔虫{
z指数：2；
}

---

离开elipse时，移除else不会移除标签

一旦使用break从数组中找到正确的elipse，就需要退出循环

function hoverTooltip() {
  var leftScroll = $("#scrollParent").scrollLeft();
  var topScroll = $("#scrollParent").scrollTop();
  let cw = canvasBack.width;
  let ch = canvasBack.height;

  for (var i = 0; i < hotspots.length; i++) {
    var h = hotspots[i];
    var dx = mousex - h.x;
    var dy = mousey - h.y;
    if (dx * dx + dy * dy < h.radius * h.radius) {
      $('#console').text(h.tip);
      ctxLabel.clearRect(0, 0, cw, ch);
      ctxLabel.fillText(h.tip, mousex + leftScroll, mousey + topScroll);
      break; // exit the loop
    } else {
       ctxLabel.clearRect(0, 0, cw, ch);
    }
  }
}

函数悬停工具提示（）{
var leftScroll=$（“#scrollParent”）.scrollLeft（）；
var topScroll=$（“#scrollParent”）.scrollTop（）；
设cw=canvasBack.width；
设ch=画布背面高度；
对于（var i=0；i

更新

我想如果你把两个物体画在另一个上面，它会表现得很糟糕。试试这个。它将显示最近绘制的点的信息

function hoverTooltip() {
  var leftScroll = $("#scrollParent").scrollLeft();
  var topScroll = $("#scrollParent").scrollTop();
  let cw = canvasBack.width;
  let ch = canvasBack.height;

  var spots = hotspots.filter((h) => {
    var dx = mousex - h.x;
    var dy = mousey - h.y; 
    return (dx * dx + dy * dy < h.radius * h.radius);
  })

  if (spots.length > 0) {
    var h = spots[spots.length - 1]; // latest drawn spot
    $('#console').text(h.tip);
    ctxLabel.clearRect(0, 0, cw, ch);
    ctxLabel.fillText(h.tip, mousex + leftScroll, mousey + topScroll);
  } 
  else
  {
    ctxLabel.clearRect(0, 0, cw, ch);
  }
}

函数悬停工具提示（）{
var leftScroll=$（“#scrollParent”）.scrollLeft（）；
var topScroll=$（“#scrollParent”）.scrollTop（）；
设cw=canvasBack.width；
设ch=画布背面高度；
变量点=热点。过滤器（（h）=>{
var dx=鼠标x-h.x；
var dy=鼠标-h.y；
返回（dx*dx+dy*dy0）{
var h=点[spots.length-1]；//最近绘制的点
$（'控制台'）.text（h.tip）；
ctxLabel.clearRect（0，0，cw，ch）；
ctxLabel.fillText（h.tip、mousex+leftScroll、mousey+topScroll）；
} 
其他的
{
ctxLabel.clearRect（0，0，cw，ch）；
}
}

离开elipse时，移除else不会移除标签

一旦使用break从数组中找到正确的elipse，就需要退出循环

function hoverTooltip() {
  var leftScroll = $("#scrollParent").scrollLeft();
  var topScroll = $("#scrollParent").scrollTop();
  let cw = canvasBack.width;
  let ch = canvasBack.height;

  for (var i = 0; i < hotspots.length; i++) {
    var h = hotspots[i];
    var dx = mousex - h.x;
    var dy = mousey - h.y;
    if (dx * dx + dy * dy < h.radius * h.radius) {
      $('#console').text(h.tip);
      ctxLabel.clearRect(0, 0, cw, ch);
      ctxLabel.fillText(h.tip, mousex + leftScroll, mousey + topScroll);
      break; // exit the loop
    } else {
       ctxLabel.clearRect(0, 0, cw, ch);
    }
  }
}

函数悬停工具提示（）{
var leftScroll=$（“#scrollParent”）.scrollLeft（）；
var topScroll=$（“#scrollParent”）.scrollTop（）；
设cw=canvasBack.width；
设ch=画布背面高度；
对于（var i=0；i