canvas绘制圆环进度条

来源：互联网发布：认知无线电网络编辑：程序博客网时间：2024/04/30 12:28

圆环进度表示是现在常用的一种进度标识方法，在此特意记录一下以便后续修改使用，此例仅供参考！

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>绘制圆环进度条</title></head><body><div><canvas id="myCanvas"></canvas></div><script type="text/javascript">function drawRing(w,h,val){//先创建一个canvas画布对象，设置宽高var c=document.getElementById('myCanvas');var ctx=c.getContext('2d');ctx.canvas.width=w;ctx.canvas.height=h;//圆环有两部分组成，底部灰色完整的环，根据百分比变化的环//先绘制底部完整的环//起始一条路径ctx.beginPath();//设置当前线条的宽度ctx.lineWidth=10;//10px//设置笔触的颜色ctx.strokeStyle='#CCCCCC';//arc()方法创建弧/曲线（用于创建圆或部分圆）arc(圆心x,圆心y,半径,开始角度,结束角度)ctx.arc(50,50,40,0,2*Math.PI);//绘制已定义的路径ctx.stroke();//绘制根据百分比变动的环ctx.beginPath();ctx.lineWidth=10;ctx.strokeStyle='#d54540';//设置开始处为0点钟方向（-90*Math.PI/180）//x为百分比值（0-100）ctx.arc(50,50,40,-90*Math.PI/180,(val*3.6-90)*Math.PI/180);ctx.stroke();//绘制中间的文字ctx.font='20px Arial';ctx.fillStyle='#747474';ctx.textBaseline='middle';ctx.textAlign='center';ctx.fillText(val+'%',50,50);}drawRing(100,100,30);</script></body></html>

运行结果如下：

0 0