第18天 怎样在页面上实现一个圆形的可点击区域?
Activity
hbl045 commentedon May 5, 2019
1、用canvas画布,弧线画圆,在canvas上监听点击事件
2、用一个div,给div添加圆角属性50,在div上添加点击事件
3、button 上添加圆角属性
4、a标签添加圆角属性
github-linong commentedon May 22, 2019
这个问题也可以理解为做一个圆。方案为两种,真的圆和模拟圆
rennzhang commentedon Jul 1, 2019
Konata9 commentedon Jul 29, 2019
总结了一下前面老哥们的回答
DOM 元素配合
border-radius: 50%
即可实现圆形点击区域。例子利用
<map>
和<area>
标签设置圆形点击区域。参考文章:HTML 标签及在实际开发中的应用利用 SVG 作出圆形,然后添加点击事件。
如果在
canvas
上,就需要画出圆形,然后计算鼠标的坐标是否落在圆内。hc951221 commentedon Aug 7, 2019
最简单的是border-radius: 50%
blueRoach commentedon Jun 4, 2020
smile-2008 commentedon Sep 16, 2020
总结了一下前面老哥们的回答
DOM 元素配合 border-radius: 50% 即可实现圆形点击区域。例子
利用 和 标签设置圆形点击区域。参考文章:HTML 标签及在实际开发中的应用
利用 SVG 作出圆形,然后添加点击事件。
如果在 canvas 上,就需要画出圆形,然后计算鼠标的坐标是否落在圆内。
zxcdsaqwe123 commentedon Oct 7, 2021
amikly commentedon Nov 5, 2021
border-radius: 50%
map + area
canvas
SVG
Iambecauseyouare commentedon Mar 2, 2023
1.用map和area

2.border-radius圆角
div
{
background-color:red;
width:200px;
height:200px;
border-radius:50%;
}
3.用canvas画布
never123450 commentedon Sep 1, 2023
lili-0923 commentedon Feb 29, 2024
div添加border-radius: 50%;添加click事件
map + area