Skip to content

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

New issue
New issue
Open
Open
[html] 第18天 怎样在页面上实现一个圆形的可点击区域？#58
Labels
htmlhtml
@haizhilin2013

Description

@haizhilin2013
haizhilin2013
opened on May 3, 2019

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

Activity

haizhilin2013
added
htmlhtml
on May 3, 2019
hbl045

hbl045 commented on May 5, 2019

@hbl045
hbl045
on May 5, 2019

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

github-linong

github-linong commented on May 22, 2019

@github-linong
github-linong
on May 22, 2019

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

  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

rennzhang commented on Jul 1, 2019

@rennzhang
rennzhang
on Jul 1, 2019
    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

Konata9 commented on Jul 29, 2019

@Konata9
Konata9
on Jul 29, 2019

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

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

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

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

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

hc951221

hc951221 commented on Aug 7, 2019

@hc951221
hc951221
on Aug 7, 2019

最简单的是border-radius: 50%

zivenday
mentioned this on Aug 20, 2019
haizhilin2013
mentioned this on Mar 14, 2020
blueRoach

blueRoach commented on Jun 4, 2020

@blueRoach
blueRoach
on Jun 4, 2020
  • border-radius: 50%
  • map和area标签
  • SVG
smile-2008

smile-2008 commented on Sep 16, 2020

@smile-2008
smile-2008
on Sep 16, 2020

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

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

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

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

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

zxcdsaqwe123

zxcdsaqwe123 commented on Oct 7, 2021

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

amikly commented on Nov 5, 2021

@amikly
amikly
on 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

Iambecauseyouare commented on Mar 2, 2023

@Iambecauseyouare
Iambecauseyouare
on Mar 2, 2023

1.用map和area
test



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

never123450

never123450 commented on Sep 1, 2023

@never123450
never123450
on Sep 1, 2023 · edited by 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

lili-0923 commented on Feb 29, 2024

@lili-0923
lili-0923
on Feb 29, 2024

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    htmlhtml

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @smile-2008@haizhilin2013@Konata9@never123450@blueRoach

        Issue actions
          [html] 第18天 怎样在页面上实现一个圆形的可点击区域？ · Issue #58 · haizlin/fe-interview