前端知识18 怎样在页面上实现一个圆形的可点击区域?

Scroll Down

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

  1. map+area , demo
  2. 圆角属性用一个div,给div添加圆角属性50,在div上添加点击事件,button 上添加圆角属性,a标签添加圆角属性
  3. 判断圆心点和单击点的距离是不是在半径中。用canvas画布,弧线画圆,在canvas上监听点击事件
  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>

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

  • 利用 标签设置圆形点击区域。参考文章:HTML 标签及在实际开发中的应用

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

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