使用html元素创建自定义形状

Question

我需要创建这个形状：

这张图中的界限并不清楚，但实际上这是常规曲线。 内圈是我的内心元素。 我对实现这个元素有一些挑战：

• 我使用<div>，我不能使用border-radius和任何其他方法的顶部边框。
• 使用<div>并为其设置background-image，但我在边界方面存在问题，我想在元素范围内更改鼠标光标。
• 我使用<img>并设置<map>和<area>来设置我的界限，但我的内部元素有问题。
• 最后我使用HTML5和canvas元素但是对于内部元素，圆圈，我找不到任何常规解决方案。元素的界限非常重要

我该如何实现这个对象？

Answer 1

你几乎可以使用HTML5 Canvas。从你的问题我读到你不能确定圆的边界来改变光标。实际上，检测光标是否在圆圈内是非常容易的。你肯定会得到圆心的x，y位置和半径吗？所以你需要做的就是检查光标的x / y坐标和圆心之间的距离是否小于（或等于）半径。如果是，那么它在圈内，否则它在外面：）