Fe-interview: [html] 第18天 怎样在页面上实现一个圆形的可点击区域？

[haizhilin2013]

第18天 怎样在页面上实现一个圆形的可点击区域？

[hbl045]

1、用canvas画布，弧线画圆，在canvas上监听点击事件
2、用一个div,给div添加圆角属性50，在div上添加点击事件
3、button 上添加圆角属性
4、a标签添加圆角属性

[github-linong]

这个问题也可以理解为做一个圆。方案为两种，真的圆和模拟圆

1. map+area , demo
2. 圆角属性（楼上的2.3.4）
3. 判断圆心点和单击点的距离是不是在半径中。（楼上1方案）
4. svg圆

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red" onclick="alert(3)"/>

</svg>

[Renato-Z]

    div {
        overflow: hidden;
        width: 50px;
        height: 50px;
        background: red;
        border-radius: 50%;
    }

    a {
        display: inline-block;
        width: 50px;
        height: 50px;
    }

<div>
    <a href="http://www.baidu.com"></a>
</div>

[Konata9]

总结了一下前面老哥们的回答

• DOM 元素配合 border-radius: 50% 即可实现圆形点击区域。例子

• 利用 <map> 和 <area> 标签设置圆形点击区域。参考文章:HTML

• 利用 SVG 作出圆形，然后添加点击事件。

• 如果在 canvas 上，就需要画出圆形，然后计算鼠标的坐标是否落在圆内。

[hc951221]

最简单的是border-radius: 50%

[blueRoach]

• border-radius: 50%
• map和area标签
• SVG

[MrZ2019]

总结了一下前面老哥们的回答

DOM 元素配合 border-radius: 50% 即可实现圆形点击区域。例子

利用

利用 SVG 作出圆形，然后添加点击事件。

如果在 canvas 上，就需要画出圆形，然后计算鼠标的坐标是否落在圆内。