html原生js进度条圆形,原生JS环形进度条

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()