var bg = document.getElementById('canvas1');
var ctx = bg.getContext('2d');
ctx.beginPath();
ctx.lineWidth = 10;
ctx.strokeStyle = '#e5e5e5';
var grd = ctx.createLinearGradient(0, 0, 100, 0); //从左到右
grd.addColorStop(0, "#e5e5e5"); //起始颜色
grd.addColorStop(1, "#e5e5e5"); //终点颜色
ctx.fillStyle = grd;
ctx.arc(72, 56, 36, 1 * Math.PI, 2 * Math.PI, false);
ctx.stroke();
var mmp = 1;
var end = 1.56
var move = function() {
ctx.beginPath();
ctx.lineWidth = 10;
ctx.strokeStyle = '#000';
var grd = ctx.createLinearGradient(0, 0, 100, 0); //从左到右
grd.addColorStop(0, "#15b5c3"); //起始颜色
grd.addColorStop(1, "#adc83d"); //终点颜色
ctx.strokeStyle = grd;
// ctx.fillRect(0,0,400,400)
console.log(mmp)
ctx.arc(72, 56, 36, 1 * Math.PI, mmp * Math.PI, false);
ctx.stroke();
if (end != 1.00) {
mmp += 0.01
if (mmp < end) {
setTimeout(move, 10)
}
}
}
move()
var bg2 = document.getElementById('canvas3');
var ctx2 = bg2.getContext('2d');
ctx2.beginPath();
ctx2.lineWidth = 10;
ctx2.strokeStyle = '#e5e5e5';
var grd2 = ctx2.createLinearGradient(0, 0, 100, 0); //从左到右
grd2.addColorStop(0, "#e5e5e5"); //起始颜色
grd2.addColorStop(1, "#e5e5e5"); //终点颜色
ctx2.fillStyle = grd2;
ctx2.arc(36, 36, 30, 0 * Math.PI, 2 * Math.PI, false);
ctx2.stroke();
ctx2.fillStyle = '#8b4e9e';
ctx2.font = 'normal 16px 微软雅黑';
ctx2.textBaseline = "middle"; //竖直对齐
ctx2.textAlign = "center"; //水平对齐
ctx2.fillText("95%", 36, 36, 50); //绘制文字
var mmp2 = 1;
var end2 = 2.95
var move2 = function() {
ctx2.beginPath();
ctx2.lineWidth = 10;
ctx2.strokeStyle = '#000';
var grd2 = ctx2.createLinearGradient(0, 0, 100, 0); //从左到右
grd2.addColorStop(0, "#7c71b6"); //起始颜色
grd2.addColorStop(1, "#8b4e9e"); //终点颜色
ctx2.strokeStyle = grd2;
// ctx2.fillRect(0,0,400,400)
ctx2.arc(36, 36, 30, 1 * Math.PI, mmp2 * Math.PI, false);
ctx2.stroke();
if (end2 != 1) {
mmp2 += 0.01
if (mmp2 < end2) {
setTimeout(move2, 10)
}
}
}
move2()
