使用canvas画弧形

有时我们会在简历或者图标中用到弧形，这里给出制作弧形的代码

使用效果为：

<center><h2>专业技能</h2></center>
		
	    <table width="80%" border="0">
          <tr>
            <td align="center"><canvas id="canvas" width="200" height="180"></canvas></td>
            <td align="center"><canvas id="canvas2" width="200" height="180"></canvas></td>
            <td align="center"><canvas id="canvas3" width="200" height="180"></canvas></td>
            <td rowspan="2" align="center">待续...</td>
          </tr>
          <tr>
            <td align="center">PS</td>
            <td align="center">PHP</td>
            <td align="center">HTML5</td>
          </tr>
        </table>
		<script>
		function getRing(id,text,color,degree){
			var canvas = document.getElementById(id);
			var cxt = canvas.getContext("2d");
			cxt.clearRect(0,0,150,150);//刚好清除稍大于圆的范围
			cxt.beginPath();
			cxt.fillStyle = color;
			cxt.translate(100,100);
			cxt.moveTo(0,0);
			cxt.arc(0,0,70,0,Math.PI*degree);
			cxt.fill();
			cxt.closePath();
			cxt.save();
			
			cxt.beginPath();
			cxt.fillStyle = "#fff";
			cxt.translate(0,0);
			cxt.moveTo(0,0);
			cxt.arc(0,0,55,0,Math.PI*2);
			cxt.fill();
			//写字
			cxt.font = "bold 24px Arial";
			cxt.fillStyle = "#e74c3c";
			cxt.textAligh = "center";
			cxt.textBaseline = "middle";
			cxt.moveTo(0,0);
			cxt.fillText(text,-18,0);	
		}
		getRing("canvas","70%","#ed008c",1.4);
		getRing("canvas2","85%","#652c91",1.7);
		getRing("canvas3","80%","#39b778",1.6);
		</script>