Question

我想在画布上画200个对象并在每个鼠标点击事件上添加鼠标

像这样的源代码...
（有价值的k是增加）

....
....
for（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

请帮我。

谢谢。

Answer 1

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

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

结果很棒，对我来说很完美。

您执行的任何其他操作都只会复制浏览器已内置的内容。

Answer 2

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

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

需要考虑的事项：

会有多少元素？它越多，就需要考虑更多的性能。
他们经常成型吗？如果它们是，那么如果它们处于网格或其他常规间距中，则可以进行一些简单的数学计算。
你需要像素完美吗？也就是说，你真的需要它准确到最后一个像素吗？如果没有，您可以尝试路径检测。

HTML5。如何在绘图画布组件中添加鼠标事件

2 个答案: