Question

我使用Javascript在画布上绘制矩形。当用户将鼠标移动到其中一个矩形上时，该矩形中应出现一个文本。仅在那个矩形（即，不是其他矩形）。

所以我设法绘制了矩形并创建了鼠标悬停事件。它完美地工作：只要鼠标移动到其中一个矩形上，文本就会出现。但是，文本出现在所有矩形中......有没有想过我做错了什么？似乎有一个循环问题，但我似乎无法解决它。

apply()

Answer 1

isPointInPath方法将检查给定坐标是否为当前路径形成的任何形状。每个rect都会添加到相同的单个路径中，该路径已经在绘制矩形的初始化代码中创建。

因此，效果是，一旦您的鼠标悬停在任何图纸上，条件在循环的每次迭代中都为真。

通过在每次迭代中创建一个新路径来解决这个问题：

for(var i=0;i<entities.length;i++){
    var entity=entities[i];
    ctx.beginPath(); // <----
    ctx.rect(entity.x, entity.y, width, height);
    // ...etc

javascript mouseover矩形画布

1 个答案: