2.环形进度条demo
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了2.环形进度条demo相关的知识，希望对你有一定的参考价值。
demo：代码
重点关注：起始点的换算哦！
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-1.11.3.js"></script>
</head>
<body>
<canvas id="mycanvas" width="200px" height="200px" style="background-color: #C6E746;"></canvas>
</body>
<script type="text/javascript">
function drow (a,b){
var canvas = document.getElementById("mycanvas");
var context = canvas.getContext("2d");
context.beginPath();
context.strokeStyle="#00BFA8";
context.arc(100,100,70,0,Math.PI*2);
context.lineWidth=10;
context.closePath();
context.stroke();
//参考线
/* context.beginPath();
context.strokeStyle="#7F8C8D";
context.lineWidth=3;
context.moveTo(0,50);
context.lineTo(200,50);
context.stroke()*/;
context.font="12px 微软雅黑";
context.lineWidth=1;
context.strokeStyle="red";
context.textBaseline="top";
context.strokeText(a ,90,50);
context.beginPath();
context.strokeStyle="red";
//设置起始点
var pro=b+100-25;
context.arc(100,100,70,Math.PI*2*(75/100),Math.PI*2*(pro/100),false);
context.lineWidth=10;
context.stroke();
context.closePath();
context.lineWidth=1;
context.strokeStyle="red";
context.textBaseline="top";
context.strokeText(b+"%" ,90,100);
}
drow("苏打",60);
</script>
</html>
以上是关于2.环形进度条demo的主要内容，如果未能解决你的问题，请参考以下文章