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

I want to draw 200 object in canvas.
and add mouse over, mouse click event each of them.

source code like this...
(valiable k is increase)

....
....
for( k = 0 ; k < 200; k++){ start = start[k]; end = end[k];

我想在画布上绘制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);    
}

....
....

my hope is..
if mouse over on shape, display valiable k
if mouse click on shape, go other url with valiable k parameter

please help me.

thanks.

.... ....我的希望是......如果鼠标在形状上,如果鼠标点击形状则显示可靠的k,使用可靠的k参数去其他网址请帮助我。谢谢。

2 个解决方案

#1

Last time I did something similar, I found it was easier to create a transparent image and place that over my canvas.

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

Then I used an imagemap with that newly added image.

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

The result was great and worked perfectly for me.

结果很棒,对我来说非常合适。

Anything else that you do will simply be duplicating something the browser already has built in.

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

#2

This is a common practice in making games. It's called "picking" or "sprite picking". Here's a great place to start (over on gamedev.stackexchange) that covers a few of your options:

这是制作游戏的常见做法。它被称为“挑选”或“精灵挑选”。这是一个很好的起点(在gamedev.stackexchange上),涵盖了一些选项:

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

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

Things to consider:

需要考虑的事项:

How many elements will there be? The more there are, the more performance needs to be considered.

有多少元素?它越多,需要考虑的性能越多。

Are they regularly shaped? If they are, there might be some easy math you can do if they are in a grid or other regular spacing.

它们经常成型吗?如果它们是,那么如果它们处于网格或其他常规间距中,则可以进行一些简单的数学运算。

Do you need pixel-perfection? That is, do you really need it to be accurate down to the last pixel? If not, you can try path detection.

你需要像素完美吗?也就是说,你真的需要它准确到最后一个像素吗?如果没有,您可以尝试路径检测。

#1