您的位置：首页 > 其它

canvas绘制圆环进度条

2017-02-21 12:14 141 查看

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

<!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.fi
ae01
llStyle='#747474';
ctx.textBaseline='middle';
ctx.textAlign='center';
ctx.fillText(val+'%',50,50);
}
drawRing(100,100,30);
</script>
</body>
</html>

运行结果如下：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航