Html5 canvas 元素上的HTML5画布鼠标悬停事件（显示工具提示）

我正在做一个可视化项目。根据我的数据，我正在画布上绘制数百个小圆圈。我想添加一个鼠标悬停事件，这样每当鼠标位于圆的封闭区域时，它都会将数据中的某个节点属性显示为工具提示或画布上的文本。 我目前的画圈法

function drawCircle(canvas,x,y,r) 
{
    canvas.strokeStyle = "#000000";
    canvas.fillStyle = "#FFFF00";
    canvas.lineWidth = 2;
    canvas.beginPath();
    canvas.arc(x,y,r,0,Math.PI*2,true);
    canvas.stroke();
    canvas.fill();
    canvas.closePath();
}

我已经调查过了 但是我不知道如何使用他们的库调用我的drawCircle[重复]方法

---

任何帮助都将不胜感激。

如果您仍然想使用KineticJS，您可以在drawCircle例程中加入“动力学形状”内容。这基本上是从以下位置拉出并拆下的：

function drawCircle(stage,x,y,r) {
  var circle = new Kinetic.Shape(function(){
    var context = this.getContext();
    // draw the circle here: strokeStyle, beginPath, arc, etc...
  });
  circle.addEventListener("mouseover", function(){
    // do something
  });
  stage.add(circle);
}

如果你毕竟不想使用KineticJS，你需要记住你画的每个圆的位置和半径，然后做如下操作：

canvas.onmouseover = function onMouseover(e) {
  var mx = e.clientX - canvas.clientLeft;
  var my = e.clientY - canvas.clientTop;
  // for each circle...
  if ((mx-cx)*(mx-cx)+(my-cy)*(my-cy) < cr*cr)
    // the mouse is over that circle
}

canvas.onmouseover=函数onmouseover（e）{
var mx=e.clientX-canvas.clientLeft；
var my=e.clientY-canvas.clientTop；
//对于每个圆。。。
if（（mx-cx）*（mx-cx）+（my-cy）*（my-cy）

您好，cx是半径x吗？什么是cr？，谢谢（cx，cy）是圆心的坐标，cr是圆的半径。