有时我们会在简历或者图标中用到弧形,这里给出制作弧形的代码
使用效果为:
<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>