HTML5画圆，且每个圆之间隔一个半圆，重复多次

不使用任何js就可以实现，兼容各个主要浏览器，ie8以下除外

html结构

<ul class='cirBox'>

<li>1</li>

<li>2</li>

<li>3</li>

<li>4</li>

</ul>

css结构

<style>

.cirBox li{ float:leftborder-radius:50%width:100pxheight:100pxbackground-color:#F00}

.cirBox li:nth-of-type(even){width:50pxborder-radius:100px 0 0 100px}/*获取偶数项li 并设置为半圆*/

</style>

cxt.arc(100,100,30,0,Math.PI*2,true)括号内第一个和第二个参数，代表圆心坐标。第三个参数是圆的半径。第四个参数代表圆周起始位置。0 PI就是起始位置。沿顺时针路线，分别是0.5 PI（正下方），1 PI和1.5 PI（正上方），为画饼图提供了扇形范围的依据。 第五个参数是弧长Math.PI*2就是整个圆，Math.PI是半圆。第六个参数是一个布尔值，true是顺时针false是顺时针。

  昨天逛网页时看到有用css与js实现环形进度条的（那位博主在面试时被要求当场写出环形进度条π_π），然后就想尝试下写出来（感觉好尴尬），说实话春节后遗症真可怕 haha~

  看了网上的 三种方法 实现方式如下：

  两个clip过的半圆，边框设置颜色，左侧的用来旋转，右侧的固定不动（width：0px），当进度到达50%时， 右侧的半圆显示出来（同时左半圆和右半圆的父元素div覆盖最外层的div），左侧的半圆继续旋转 。

  可能我没说清楚，原文链接： http://blog.csdn.net/angeljsl/article/details/51208960

  使用SVGstroke-dasharray寥寥数行实现圆环loading进度效果，原文链接： http://www.zhangxinxu.com/wordpress/?p=4889

  利用path元素，使用path指令绘制扇形，原文链接： http://www.tuicool.com/articles/e2UzuaQ

  常用的path指令:

两个介绍 SVG比较详细的网址

   http://www.w3cplus.com/css3/using-making-sense-of-clip-path.html

   http://www.mb5u.com/HTML5/html5_96413.html

  核心就是使用-webkit-clip-path:polygon()切割div，border-radius:50%画出圆弧

---