var circle01 = document.querySelector("#myCanvas01");
drawAll(50, Math.PI, circle01);
function drawAll(percent, sR, canvasId) {
if (percent < 0 || percent > 100) {
return;
}
if (sR < Math.PI / 2 || sR >= 3 / 2 * Math.PI) {
return;
}
var cxt = canvasId.getContext('2d'),
cWidth = canvasId.width,
cHeight = canvasId.height,
baseColor = 'transparent',
PI = Math.PI,
SR = sR || 1 / 2 * PI; // 默认圆弧的起始点弧度为π/2
var g = cxt.createLinearGradient(170, 50, 60, 100, 100, 100); //创建渐变对象 渐变开始点和渐变结束点
g.addColorStop(0, "#0053e1"); //添加颜色点
g.addColorStop(1, "#00fafb"); //添加颜色点
var coverColor = g;
var finalRadian = ((2 * PI) * percent / 100); // 圈的终点弧度
var step = (2 * PI) / 100; // 一个1%对应的弧度大小
var text = 0; // 显示的数字
window.requestAnimationFrame(paint);
function paint() {
cxt.clearRect(0, 0, cWidth, cHeight);
var endRadian = text * step;
// 画灰色圆弧
// drawCanvas(cWidth / 2, cHeight / 2, 60, sR, sR + (PI + (PI - sR) * 2), baseColor, 12);
// drawCanvas(cWidth / 2, cHeight - 15, 95, sR, sR + (PI + (PI - sR) * 2), baseColor, 17);
// 画红色圆弧
drawCanvas(cWidth / 2, cHeight / 2, 55, 0, endRadian, coverColor, 6);
var textWidth = cxt.measureText(text + '%').width;
text++;
if (endRadian.toFixed(2) < finalRadian.toFixed(2)) {
window.requestAnimationFrame(paint);
}
}
function drawCanvas(x, y, r, sRadian, eRadian, color, lineWidth) {
cxt.beginPath();
cxt.lineCap = "round";
cxt.strokeStyle = color;
cxt.lineWidth = lineWidth;
cxt.arc(x, y, r, sRadian, eRadian, false);
cxt.stroke();
}
}
var canvas3 = document.querySelector("#canvas1");
draw(50, Math.PI, canvas3, " #438bfb", "#00ebff");
function draw(percent, sR, canvasId ,linearColor1 ,linearColor2) {
if (percent < 0 || percent > 100) {
return;
}
if (sR < Math.PI / 2 || sR >= 3 / 2 * Math.PI) {
return;
}
var cxt = canvasId.getContext('2d'),
cWidth = canvasId.width,
cHeight = canvasId.height,
baseColor = 'transparent',
PI = Math.PI,
SR = sR || 1 / 2 * PI; // 默认圆弧的起始点弧度为π/2
var g = cxt.createLinearGradient(170, 50, 60, 100, 100, 100); //创建渐变对象 渐变开始点和渐变结束点
g.addColorStop(1, linearColor1); //添加颜色点
g.addColorStop(0, linearColor2); //添加颜色点
var coverColor = g;
var finalRadian = SR + ((PI + (PI - SR) * 2) * percent / 100); // 红圈的终点弧度
var step = (PI + (PI - SR) * 2) / 30; // 一个1%对应的弧度大小
var text = 0; // 显示的数字
window.requestAnimationFrame(paint);
function paint() {
cxt.clearRect(0, 0, cWidth, cHeight);
var endRadian = SR + text * step;
// 画灰色圆弧
// drawCanvas(cWidth / 2, cHeight / 2, 60, sR, sR + (PI + (PI - sR) * 2), baseColor, 12);
drawCanvas(cWidth / 2, cHeight - 15, 95, sR, sR + (PI + (PI - sR) * 2), '#052d54', 17);
// 画红色圆弧
drawCanvas(cWidth / 2, cHeight - 15, 94, SR, endRadian, coverColor, 19);
var textWidth = cxt.measureText(text + '%').width;
text++;
if (endRadian.toFixed(2) < finalRadian.toFixed(2)) {
window.requestAnimationFrame(paint);
}
}
function drawCanvas(x, y, r, sRadian, eRadian, color, lineWidth) {
cxt.beginPath();
cxt.lineCap = "round";
cxt.strokeStyle = color;
cxt.lineWidth = lineWidth;
cxt.arc(x, y, r, sRadian, eRadian, false);
cxt.stroke();
}
}