Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
haizhilin2013 opened this issue May 3, 2019 · 12 comments
Open

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

haizhilin2013 opened this issue May 3, 2019 · 12 comments
Labels
html html

Comments

@haizhilin2013
Copy link
Collaborator

第18天 怎样在页面上实现一个圆形的可点击区域？
@haizhilin2013 haizhilin2013 added the html html label May 3, 2019
@hbl045
Copy link

hbl045 commented May 5, 2019

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

@github-linong
Copy link

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

  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
Copy link 

    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
Copy link

Konata9 commented Jul 29, 2019

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

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

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

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

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

@hc951221
Copy link

hc951221 commented Aug 7, 2019

最简单的是border-radius: 50%

@zivenday zivenday mentioned this issue Aug 20, 2019
Open
@haizhilin2013 haizhilin2013 mentioned this issue Mar 14, 2020
Open
@blueRoach
Copy link

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

@MrZ2019
Copy link

MrZ2019 commented Sep 16, 2020

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

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

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

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

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

@zxcdsaqwe123
Copy link

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

@amikly
Copy link

amikly commented Nov 5, 2021

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
Copy link

1.用map和area
test



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

@never123450
Copy link

never123450 commented Sep 1, 2023 •
edited 

<!--  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
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
html html
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests