2.环形进度条demo

最新推荐文章于 2024-05-21 02:06:32 发布

weixin_30550271

最新推荐文章于 2024-05-21 02:06:32 发布

阅读量47

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/dp168/p/5885819.html

版权

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>

转载于:https://www.cnblogs.com/dp168/p/5885819.html

weixin_30550271

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2.环形进度条demo

demo：代码重点关注：起始点的换算哦！<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <script src="js/jquery-1.11.3.js"></script> <...
复制链接

扫一扫