HTML5。如何在绘制的画布成分中添加鼠标事件
我想在画布上画200个对象
并将鼠标添加到每个事件上，鼠标单击事件
像这样的源代码
（有效k增加）
对于（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
如果鼠标单击形状，则转到其他url，并使用有效的k参数
请帮助我<谢谢
共有2个答案
这是制作游戏的常见做法。这叫做“采摘”或“采摘精灵”。这里是一个很好的起点（在gamedev.stackexchange上），它涵盖了您的一些选项：
如何在画布中的精灵上检测鼠标事件？
需要考虑的事项：
- 有多少元素？数量越多，需要考虑的性能就越多
上次我做了类似的事情，我发现创建一个透明图像并将其放置在画布上更容易。
然后，我将一个imagemap与新添加的图像一起使用。
结果很好，对我来说非常有效。
您所做的任何其他事情都只是复制浏览器已经内置的内容。
-
我想在画布上绘制200个或更多（高度流动）对象 并将鼠标添加到每个事件上，鼠标单击事件 像这样的源代码... （valiable k是增加的） “ 对于（k=0；k } 我的希望是... 如果鼠标放在形状上，显示有效k 如果鼠标点击形状，转到其他带有有效k参数的url 但是，我不想使用图像。 请帮帮我。 谢谢。
-
我在画布上处理鼠标事件时遇到问题。我想用鼠标来绘制它，我已经想出了这些事件处理程序，但当我开始绘制时，它们什么都不做。 你能帮我告诉我遗漏了什么或者如何重写它以便它开始工作吗？
-
问题内容： 似乎没有绘制椭圆形形状的本机功能。我也不是在寻找蛋形。 是否可以绘制具有2个贝塞尔曲线的椭圆形？有人遇到过吗？ 我的目的是画一些眼睛，实际上我只是使用弧线。提前致谢。 解 因此，scale（）更改所有下一个形状的缩放比例。Save（）之前保存设置，还原用于还原设置以绘制新形状而无需缩放。 感谢Jani 问题答案： 更新： 缩放方法可能会影响笔触宽度的外观 正确的缩放方法可以保持笔画宽度
-
实际上，我可以使用函数来完成。我从“HTML5画布-如何在图像背景上画一条线？”中得到的东西。但是我需要在不使用from函数的情况下绘制图像，如下所示：
-
我有一个画布，你可以在那里画画，我希望用户看到他正在绘制的点的大小。所以我需要在画布上绘制一个10x10像素正方形的自定义光标。当然，我不想在用户移动鼠标的时候在图像上画。 我的想法是： 我可以以某种方式备份原始图像，然后每次都将其涂满 我可以用光标移动a。但如果光标离开画布，我需要转发每一次单击，并使其不可见。 我可以创建一个分层的画布，在我的画布上再加上一个画布，只用于绘制光标。 这样做最好是
-
问题内容： 我需要知道如何在画布上绘制多边形。不使用jQuery或类似的东西。 问题答案： 使用和创建一个路径：