如何在頁面上實現一個圓形可點擊區域

1.   map+area

DW軟件實現方法    視頻：http://www.chuanke.com/3885380-190205.html

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("外")
    }
 }