1. map+area
DW软件实现方法 视频：
2. border-radius（H5）
-
<style>
-
.circle{
-
/*圆设置*/
-
width:100px;
-
height:100px;
-
border-radius: 50%;
-
cursor: pointer;
-
/*文字设置*/
-
position: absolute;
-
left:50px;
-
top:50px;
-
line-height: 100px;
-
text-align: center;
-
color: white;
-
background-color:dimgray;
-
}
-
</style>
3. 纯js实现
求点在不在圆上的简单算法、获取鼠标坐标等等
两点之间的距离计算公式
|AB|=Math.abs(Math.sqrt(Math.pow(X2-X1),2)+Math.pow(Y2-Y1,2)))
假设圆心为（100,100）,半径为50，在圆内点击弹出相应的信息，在圆外显示不在圆内的信息
-
document.onclick=function(e){
-
var r=50;//圆的半径
-
var x1=100,y1=100,x2= e.clientX;y2= e.clientY;
-
//计算鼠标点的位置与圆心的距离
-
var len=Math.abs(Math.sqrt(Math.pow(x2-x1,2)+Math.pow(y2-y1,2)));
-
if(len<=50){
-
console.log(“内”)
-
}else{
-
console.log(“外”)
-
}
-
}
以上就是怎么能在页面上实现一个圆形可点击区域？的详细内容，更多请关注其它相关文章！
- 使用canvas设计出一个简易的画板
- 项目实战：医药箱APP
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
