HTML5。如何在绘制的画布组件中添加鼠标事件答案

【问题标题】：HTML5. How to add mouse event in drawn canvas compoentHTML5。如何在绘制的画布组件中添加鼠标事件
【发布时间】：2014-08-07 09:03:48
【问题描述】：

我想在画布上绘制 200 个对象。
并添加鼠标悬停、鼠标单击事件。

像这样的源代码...
（有效 k 增加）

....
....
for(k = 0;k

x1 = centerX-radius*Math.sin(-arg*start)*0.9;
y1 = centerY-radius*Math.cos(-arg*start)*0.9;
x2 = centerX-radius*Math.sin(-arg*start)*0.95;
y2 = centerY-radius*Math.cos(-arg*start)*0.95;
x3 = centerX-radius*Math.sin(-arg*end)*0.95;
y3 = centerY-radius*Math.cos(-arg*end)*0.95;
x4 = centerX-radius*Math.sin(-arg*end)*0.9;
y4 = centerY-radius*Math.cos(-arg*end)*0.9; 

Shape(ctx, x1,y1,x2,y2,x3,y3,x4,y4,k);

}


function Shape(ctx, x1,y1,x2,y2,x3,y3,x4,y4, num){
    ctx.strokeStyle = "black";
    ctx.fillStyle = "red";    
    ctx.globalAlpha = 1.0;
    ctx.moveTo(x1,y1);
    ctx.lineTo(x2,y2);
    ctx.lineTo(x3,y3);
    ctx.lineTo(x4,y4);
    ctx.lineTo(x1,y1);
    ctx.lineWidth = 0.5;
    ctx.fill();
    ctx.stroke();
    ctx.fillText(k,(x2+x3)/2,(y2+y3)/2);    
}

....
....

我的希望是..
如果鼠标悬停在形状上，则显示变量 k
如果鼠标单击形状，则转到具有有效 k 参数的其他 url

请帮我。

谢谢。

【问题讨论】：

标签： javascript css html mouseevent

【解决方案1】：

上次我做了类似的事情，我发现创建透明图像并将其放置在我的画布上更容易。

然后我使用了带有新添加的图像的图像映射。

结果非常好，对我来说效果很好。

您所做的任何其他事情都只是复制浏览器已经内置的内容。

【讨论】：

是否可以在新添加的图像中自动添加图像映射标签？
当然。只要您传递一组顶点，看起来就像您正在做的那样，您可以轻松创建一个area 元素并将其添加到您的map。您可以将 mousein mouseout 和 click 处理程序添加到这些 area 元素。

【解决方案2】：

这是制作游戏的常见做法。它被称为“采摘”或“精灵采摘”。这是一个很好的起点（在 gamedev.stackexchange 上），涵盖了您的一些选项：

How can I detect mouse events on sprites in a canvas?

需要考虑的事项：

会有多少个元素？数量越多，需要考虑的性能就越多。
它们的形状是否规则？如果是这样，如果它们在网格或其他规则间距中，您可能可以做一些简单的数学运算。
您需要像素完美吗？也就是说，您真的需要精确到最后一个像素吗？如果没有，您可以尝试路径检测。

【讨论】：

但我希望不要构建图像