在 HTML/HTML5 中使用 JS 的不规则锚点和形状答案

【问题标题】：Irregular anchors and shapes using JS in HTML/HTML5在 HTML/HTML5 中使用 JS 的不规则锚点和形状
【发布时间】：2011-10-07 21:45:59
【问题描述】：

是否有可能在 JS 中的某些表面上具有不规则的形状，例如可以点击的锚点，并且在页面加载时它在运行时变成一个球？我想为可以是球的表面设置动画，并且还想跟踪特定点的锚点形状。

那么可以使用 JS 吗？如何做到这一点？我找不到任何解决方案。有没有一些JS库可以做到这一点？像 processing.js 或 Raphael js 之类的？

【问题讨论】：

这是一个非常糟糕的问题。我不知道你想做什么。如果您正在寻找答案，我是否建议您尝试更好地解释您的需求。你是指什么样的形状？您希望哪些区域可点击？当点击某些东西时会发生什么？您的总体目标是什么？
我想添加箭头，这将是一个圆圈的一部分，有点像幸运轮，并希望它的每个部分都可以点击，一个是橙色的，一个是红色的，一个是黄色的等等。我希望所有这些部分都可以点击，并且想知道哪个部分在哪个位置。
嗨，即使我正在寻找不规则形状的锚链接。我尝试过使用画布，但没有扎实的基础。你能解决这个问题吗？
我认为 Raphael JS 可以帮助我们处理矢量形状，但是我们如何将它组合起来以及如何制作链接是个问题，可以进行映射，但这不是一个程序化且更可控的解决方案。

【解决方案1】：

我可以推荐一个 HTML 图像地图吗？您可以在页面中嵌入一个 IMG 标签，设置它的 usemap 属性，然后将该图像上的形状定义为可点击区域。

它没有画布那么多的功能，但在这种情况下，普通的 IMG 元素可能会做。

【讨论】：

【解决方案2】：

我建议使用带有出色 Raphael js 库的 SVG。您可以使用纯 javascript（即无需额外插件）制作交互式动画，并且可以将这些对象制作为不规则的锚点（覆盖 click、mouseover 和 mouseout 事件以模拟锚点行为）。

另一种思路是使用HTML5画布，但这需要更多的代码（技术还不成熟），并且在不同的浏览器下可能无法工作。

【讨论】：