原生js实现
实现代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
text-align: center;
}
canvas {
background: #ffffff;
}
</style>
</head>
<body>
<canvas id="circle" width="500" height="400"></canvas>
<script>
var circle = document.getElementById("circle");
var ctx = circle.getContext("2d");
//结束角度
var end = 135;
// 创建变量，进度值1%
var load = 0;
// 创建定时器，绘制进度条
var timer = setInterval(function () {
//每次加载前清除画布
ctx.clearRect(0, 0, 500, 400);
ctx.beginPath();
// 灰色底框
ctx.strokeStyle = "#E5F3FD"; //底框的背景颜色
ctx.lineWidth = 4; //底框的宽度
ctx.lineCap = "round"
//底框显示的位置想x,y,r,start,end
ctx.arc(250, 200, 100, 135 * Math.PI / 180, 45 * Math.PI / 180);
ctx.stroke(); //绘制底框，空心圆
ctx.closePath();
// 修改结束角度
end += 2.7;
// 开始新的路径
ctx.beginPath();
// 绘制新的圆环
ctx.strokeStyle = "#46B1F5";
ctx.lineWidth = 4;
//从顶点位置开始
ctx.arc(250, 200, 100, 135 * Math.PI / 180, end * Math.PI / 180);
ctx.stroke();
ctx.closePath();
// 设置中间的文字字体和大小
ctx.font = "18px SimHei";
load++;
// 设置图形文字
ctx.fillText("已加载完成：" + load + "%", 180, 208);
if (load == 100) {
clearInterval(timer);
}
}, 200);
</script>
</body>
</html>
微信小程序实现
微信小程序的canvas画布会有马赛克效果，哈哈哈
实现代码
// 画布
canvasInit(res) {
let that = this;
//结束角度
// let end = this.data.end;
// 创建变量，进度值1%
let load = this.data.load;
const canvas = res[0].node;
const ctx = canvas.getContext("2d");
let timer = setInterval(function () {
//每次加载前清除画布
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
ctx.strokeStyle = "#E5F3FD"; //底框的背景颜色
ctx.lineWidth = 3; //底框的宽度
ctx.lineCap = "round";
//底框显示的位置想x,y,r,start,end
ctx.arc(150, 102, 100, 153 * (Math.PI / 180), 27 * (Math.PI / 180));
ctx.stroke(); //绘制底框，空心圆
ctx.closePath();
// 修改结束角度
// end += 2.34;
// 开始新的路径
ctx.beginPath();
// 绘制新的圆环
ctx.strokeStyle = "#46B1F5";
ctx.lineWidth = 3;
ctx.lineCap = "round";
if (that.data.load < 99) {
load++;
} else {
console.log("1111");
load = 100;
clearTimeout(that.data.timer);
}
//从顶点位置开始
ctx.arc(
150,
102,
100,
153 * (Math.PI / 180),
(153 + 2.34 * load) * (Math.PI / 180)
);
ctx.stroke();
ctx.closePath();
if (load < 100) that.setData({ load });
setTimeout(() => {
that.startAddEquipment(load);
}, 1000);
}, 770);
this.setData({ timer });
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
wx.createSelectorQuery()
.select("#circle")
.fields({ node: true, size: true })
.exec(this.canvasInit.bind(this));
},
