实现圆形区域

在页面上实现一个圆形可点击区域：

1.map+area

<img src ="planets.gif" alt="Planets" usemap ="#planetmap" />

<map name="planetmap">
  <area shape="rect" coords="0,0,110,260" href="sun.htm" alt="Sun" />
  <area shape="circle" coords="129,161,10" href="mercur.htm" alt="Mercury" />
  <area shape="circle" coords="180,139,14" href="venus.htm" alt="Venus" />
</map>

/*圆形区域 坐标分别是圆心坐标x,y,和半径r；矩形rect是两个点的坐标，对角顶点；polygon多边形，要写每一个顶点坐标*/

2.svg

SVG 文件可通过以下标签嵌入 HTML 文档：、

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<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"/>

</svg>

3.border-radius

4.纯js实现，需要求一个点在不在圆上简单算法、获取鼠标坐标等等。

document.onclick = function(e){
    var r=50,x1 = 100,y1 = 100;
    var x2 = e.clientX,y2 = e.clientY;
    var distance = Math.abs(Math.sqrt(Math.pow(x2-x1,2),Math.pow(y2-y1,2)));  //求斜边的长度 和半径 作比较
    if(distance <= 50)
      alert("YES ! in circle!");
}