[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>

[rennzhang]

    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% 即可实现圆形点击区域。例子

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

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

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

[zxcdsaqwe123]

<style> #app{ width: 0; height: 0; border: 100px solid blue; border-radius: 50%; } </style> <script> function test(){ console.log('点到了圆') } </script>

[amikly]

border-radius: 50%

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

map + area

<img src="test1.jpg" alt="test" usemap="#test">
<map id="test" name="test">
    <area shape="rect" coords="20,20,80,80" href="#rect" alt="矩形">
    <area shape="circle" coords="200,50,50" href="#circle" alt="圆形">
    <area shape="poly" coords="150,100,200,120,180,130,190,180,150,150,100,160,140,120,100,110" href="#poly" alt="多边形">
</map>

canvas

// 用canvas画布，弧线画圆，在canvas上监听点击事件
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(100,75,50,0,2*Math.PI);
ctx.stroke();

SVG

<!-- 利用 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>

[Iambecauseyouare]

1.用map和area




2.border-radius圆角
div
{
background-color:red;
width:200px;
height:200px;
border-radius:50%;
}
3.用canvas画布

[never123450]

<!--  border-radius: 50%; -->
<div class="circle"></div>

<div class="circle1"></div>

<div class="circle2"></div>

<img src="diqiu.jpg" alt="图像" usemap="#imagemap">
<map name="imagemap">
  <area shape="circle" coords="50,50,30" href="link1.html" alt="区域1">
  <area shape="rect" coords="100,100,200,200" href="link2.html" alt="区域2">
  <area shape="poly" coords="300,300,350,350,400,300" href="link3.html" alt="区域3">
</map>

<!-- svg -->
<svg width="200" height="200">
  <circle cx="100" cy="100" r="50" fill="red" />
</svg>


<style>
  .circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: red;
}
.circle1{
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: red;
  /* transform: scale(1); */
}
.circle2 {
  width: 100px;
  height: 100px;
  position: relative;
}

.circle2::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: red;
}
</style>

[lili-0923]

div添加border-radius: 50%;添加click事件
map + area