好的，我已经通过无数教程查看了我想用jQuery canvas完成的特定目标。我使用html5和jQuery中的canvas元素绘制了一个地图。我想要实现的是当鼠标悬停在特定形状（不是矩形或圆形）上，但是复杂的多边形形状时，形状会改变颜色并显示文本。
我还想要一个小对话框来弹出这个特定的形状。我不希望整个画布成为悬停功能的目标，只是它的某个部分。
想想大学校园地图，所有独立的建筑物彼此相邻。如果我将鼠标悬停在特定的建筑物上，建筑物的颜色会发生变化并告诉我建筑物的名称（即Science Bldg。）。我不希望文本的颜色与悬停在其上的建筑物的颜色相同。
我不知道是否可以通过将变量和函数或多个画布定义在彼此之上的多个路径来实现。我希望我已经指定了我想要完成的任务。如果有人可以帮助我，我希望他们可以引导我走向正确的方向和/或发布像jsfiddle这样的例子。
谢谢！
答案 0 :(得分：0)
是的，为每个建筑物定义一个路径，然后您可以点击测试这些路径，看看鼠标是否悬停在地图中的某个建筑物内。
以下是如何完成任务的叙述大纲：
绘制每个建筑物的x / y坐标点。获取xy坐标的一种方法是在Paint（或类似程序）中打开地图，为您提供鼠标坐标。
使用context.drawImage在画布上绘制地图。
收听mousemove事件（canvas.onmousemove）
在mousemove处理程序中，命中测试每个构建路径（a）使用context.isPointInPath定义一个路径，其中包含beginPath + moveTo + lineTo（b）命中测试。
如果你得到一个命中，那么使用context.fillStyle为你的文本设置颜色，然后在画布context.fillText上绘制你的文字标签（“这是礼堂”，150,35）