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

HTML5. How to add mouse event in drawn canvas compoent

本文关键字：组件 添加 事件 鼠标 布组件 绘制 HTML5      更新时间：2023-09-26


我想在画布上画200个物体
并添加鼠标悬停、鼠标点击事件


像这样的源代码
(有效k为增加(

……
……
对于(k＝0；k<200；k++({start=start[k]；end=end[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


请帮帮我。

谢谢


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

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

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

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

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

如何检测画布中精灵上的鼠标事件？

需要考虑的事项：

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