方法一：
用H5自带的canvas画圆环
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5 Canvas 圆形进度条并显示数字百分比</title>
<style>
*{margin:0;padding:0;}
body{text-align:center;background-color:#000;}
</style>
</head>
<body>
<canvas id="canvas" width="500" height="500" style="background:#000;"></canvas>
<script>
window.onload = function(){
var canvas = document.getElementById('canvas'), //获取canvas元素
context = canvas.getContext('2d'), //获取画图环境，指明为2d
centerX = canvas.width/2, //Canvas中心点x轴坐标
centerY = canvas.height/2, //Canvas中心点y轴坐标
rad = Math.PI*2/100, //将360度分成100份，那么每一份就是rad度
speed = 0.2; //加载的快慢就靠它了
//绘制5像素宽的运动外圈
function blueCircle(n){
context.save();
context.strokeStyle = "#fff"; //设置描边样式
context.lineWidth = 5; //设置线宽
context.beginPath(); //路径开始
context.arc(centerX, centerY, 100 , -Math.PI/2, -Math.PI/2 +n*rad, false); //用于绘制圆弧context.arc(x坐标，y坐标，半径，起始角度，终止角度，顺时针/逆时针)
context.stroke(); //绘制
context.closePath(); //路径结束
context.restore();
}
//绘制白色外圈
function whiteCircle(){
context.save();
context.beginPath();
context.lineWidth = 2; //设置线宽
context.strokeStyle = "red";
context.arc(centerX, centerY, 100 , 0, Math.PI*2, false);
context.stroke();
context.closePath();
context.restore();
}
//百分比文字绘制
function text(n){
context.save(); //save和restore可以保证样式属性只运用于该段canvas元素
context.strokeStyle = "#fff"; //设置描边样式
context.font = "40px Arial"; //设置字体大小和字体
//绘制字体，并且指定位置
context.strokeText(n.toFixed(0)+"%", centerX-25, centerY+10);
context.stroke(); //执行绘制
context.restore();
}
//动画循环
(function drawFrame(){
window.requestAnimationFrame(drawFrame);
context.clearRect(0, 0, canvas.width, canvas.height);
whiteCircle();
text(speed);
blueCircle(speed);
if(speed > 100) speed = 0;
speed += 0.1;
}());
}
</script>
</body>
</html>编译结果：
重写该方法，让进度条可以按照后台传过来的数据按比例显示
紧接着在ts中写方法可供调用
首先在结构体中定义canvas对象：
然后编写绘制内部不变的圆环的函数，此函数不是动态，可以写在主函数中
编写动态外圆环，此圆环用时可以被外部动态调用
最后在页面初始化数据以后调用这个圆环方法，注意，需要调用两个函数，一个是主函数，另一个是按需求所调用的外部圆环
此处只调用了一个方法，所以在显示时也只是显示一个固定的主内环，显示情况如下图
方法二：用两个矩形用css动画动态画一个动态显示的圆环
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>扫一扫二维码马上进入对战</title>
<style>
.circleProgress_wrapper{
width: 48px;
height: 48px;
margin: 0px auto;
position: relative;
border:1px solid #ddd;
}
.wrapper{
width: 24px;
height: 48px;
position: absolute;
top:0;
overflow: hidden;
}
.right{
right:0;
}
.left{
left:0;
}
.circleProgress{
width: 44px;
height: 44px;
border:2px solid rgb(232, 232, 12);
border-radius: 50%;
position: absolute;
top:0;
-webkit-transform: rotate(45deg);
}
.rightcircle{
border-top:2px solid green;
border-right:2px solid green;
right:0;
-webkit-animation: circleProgressLoad_right 5s linear infinite;
}
.leftcircle{
border-bottom:2px solid green;
border-left:2px solid green;
left:0;
-webkit-animation: circleProgressLoad_left 5s linear infinite;
}
@-webkit-keyframes circleProgressLoad_right{
0%{
border-top:2px solid #ED1A1A;
border-right:2px solid #ED1A1A;
-webkit-transform: rotate(45deg);
}
50%{
border-top:2px solid rgb(232, 232, 12);
border-right:2px solid rgb(232, 232, 12);
border-left:2px solid rgb(81, 197, 81);
border-bottom:2px solid rgb(81, 197, 81);
-webkit-transform: rotate(225deg);
}
100%{
border-left:2px solid green;
border-bottom:2px solid green;
-webkit-transform: rotate(225deg);
}
}
@-webkit-keyframes circleProgressLoad_left{
0%{
border-bottom:2px solid #ED1A1A;
border-left:2px solid #ED1A1A;
-webkit-transform: rotate(45deg);
}
50%{
border-bottom:2px solid rgb(232, 232, 12);
border-left:2px solid rgb(232, 232, 12);
border-top:2px solid rgb(81, 197, 81);
border-right:2px solid rgb(81, 197, 81);
-webkit-transform: rotate(45deg);
}
100%{
border-top:2px solid green;
border-right:2px solid green;
border-bottom:2px solid green;
border-left:2px solid green;
-webkit-transform: rotate(225deg);
}
}
</style>
</head>
<body>
<div class="circleProgress_wrapper">
<div class="wrapper right">
<div class="circleProgress rightcircle"></div>
</div>
<div class="wrapper left">
<div class="circleProgress leftcircle"></div>
</div>
</div>
</body>
</html>显示情况：
方法三：利用js插件编写
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.wrap,.circle,.percent{
position: absolute;
width: 200px;
height: 200px;
border-radius: 50%;
}
.wrap{
top:50px;
left:50px;
background-color: #ccc;
}
.circle{
box-sizing: border-box;
border:20px solid #ccc;
clip:rect(0,200px,200px,100px);
}
.clip-auto{
clip:rect(auto, auto, auto, auto);
}
.percent{
box-sizing: border-box;
top:-20px;
left:-20px;
}
.left{
transition:transform ease;
border:20px solid blue;
clip: rect(0,100px,200px,0);
}
.right{
border:20px solid blue;
clip: rect(0,200px,200px,100px);
}
.wth0{
width:0;
}
.num{
position: absolute;
box-sizing: border-box;
width: 160px;
height: 160px;
line-height: 160px;
text-align: center;
font-size: 40px;
left: 20px;
top: 20px;
border-radius: 50%;
background-color: #fff;
z-index: 1;
}
</style>
<script src="http://apps.bdimg.com/libs/zepto/1.1.4/zepto.min.js"></script>
</head>
<body>
<div class="wrap">
<div class="circle">
<div class="percent left"></div>
<div class="percent right wth0"></div>
</div>
<div class="num"><span>0</span>%</div>
</div>
</body>
<script>
var percent=0;
var loading=setInterval(function(){
if(percent>100){
percent=0;
$('.circle').removeClass('clip-auto');
$('.right').addClass('wth0');
}else if(percent>50){
$('.circle').addClass('clip-auto');
$('.right').removeClass('wth0');
}
$('.left').css("-webkit-transform","rotate("+(18/5)*percent+"deg)");
$('.num>span').text(percent);
percent++;
},200);
</script>
</html>显示情况
如果有其他方法，希望可以在这一起汇总
329
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
