效果图如下：动态加载的
实现代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.midLeft {
250px;
height: 250px;
position: absolute;
left: 0;
top: 0;
background-color: #000;
}
#canvas{
position: absolute;
left: -25px;
top: -24px;
}
</style>
</head>
<body>
<div class="midLeft">
<div class="left">
<canvas width="252" height="252" id="process"></canvas>
<canvas width="300" height="300" id="canvas"></canvas>
</div>
</div>
<script type="text/javascript">
// 技能
var c = document.getElementById("process");
var ctx = c.getContext('2d'),
centerX = c.width / 2, //Canvas中心点x轴坐标
centerY = c.height / 2, //Canvas中心点y轴坐标
rad = Math.PI * 2 / 100, //将360度分成100份，那么每一份就是rad度
speed = 0.1; //加载的快慢就靠它了
// 加载快慢
animate();
function animate() {
window.requestAnimationFrame(function () {
if (speed < 82) {
animate();
}
});
ctx.clearRect(0, 0, c.width, c.height);
speed += 0.4;
drawCircle(ctx, speed);
};
function drawCircle(ctx, percent) {
//画进度环
ctx.save();
ctx.strokeStyle = "#1e8c5c";
ctx.lineWidth = 16;
ctx.beginPath();
ctx.arc(centerX, centerY, 100, 149.8, -Math.PI / 2 + percent * rad + 120, false);
ctx.stroke();
ctx.closePath();
ctx.restore();
//百分比文字绘制
ctx.save();
ctx.fillStyle = "#fff";
ctx.font = "bold 21px Arial";
//绘制字体并指定位置
ctx.fillText('成功率', centerX - 25, centerY);
ctx.fillText(percent.toFixed(0) + '%', centerX - 15, centerY + 20);
ctx.restore();
}
// 内部进度条
var cont = document.getElementById('canvas');
var context = cont.getContext('2d');
var center_X = cont.width / 2; //Canvas中心点x轴坐标
var center_Y = cont.height / 2; //Canvas中心点y轴坐标
animate_c();
function animate_c() {
window.requestAnimationFrame(function () {
if (speed < 82) {
animate_c();
}
});
context.clearRect(0, 0, cont.width, cont.height);
speed += 0.4;
drawCircle_c(context, speed);
};
function drawCircle_c(ctx, percent) {
//画进度环
ctx.save();
ctx.strokeStyle = "#4e5866";
ctx.lineWidth = 12;
ctx.beginPath();
ctx.arc(center_X, center_Y, 80, 119.9, -Math.PI / 2 + 90.1 + percent * rad, false);
ctx.stroke();
ctx.closePath();
ctx.restore();
for (var i = 0; i < 12; i++) {
//保存当前状态
ctx.save();
//刻度粗细
ctx.lineWidth = 7;
//刻度颜色
ctx.strokeStyle = "#000"
//设置00点,以画布中心为00
ctx.translate(center_X, center_Y);
//设置旋转角度 参数是弧度，角度 0--360 弧度角度*Math.PI/180
ctx.rotate(i * 30 * Math.PI / 180);
ctx.beginPath();
//刻度起始点
ctx.moveTo(0, -74);
//刻度结束点
ctx.lineTo(0, -108);
ctx.closePath();
ctx.stroke();
//将旋转后的图片返回原画布
ctx.restore();
}
}
</script>
<script src="./js/jquery/jquery.min.js"></script>
</body>
</html>