<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
#circle{
outline: 1px solid black;
transform: scale(0.2);
}
</style>
</head>
<body>
<canvas id="circle" height="1000px" width="1000px">
</canvas>
</body>
<script src="./zxk.js">
</script>
</html>
function circle(percentage) {
const canvas = document.querySelector('#circle');;
const ctx = canvas.getContext('2d');
const commmonObj = {
ctx: ctx,
x: 500,
y: 500,
radius: 400,
lineWidth: 50
};
const activeObj = {
...commmonObj,
startAngle: (Math.PI * 2 * 120) / 360,
endAngle: (Math.PI * 2 * (120 + (360 - 60) * percentage)) / 360,
color: '#28BF68'
};
const backObj = {
...commmonObj,
startAngle: activeObj.endAngle,
endAngle: (Math.PI * 2 * 60) / 360,
color: '#ecf9ef'
};
drawCircle(backObj);
drawCircle(activeObj);
}
function drawCircle(circleObj) {
const ctx = circleObj.ctx;
ctx.beginPath();
ctx.arc(
circleObj.x,
circleObj.y,
circleObj.radius,
circleObj.startAngle,
circleObj.endAngle,
false
);
ctx.lineWidth = circleObj.lineWidth;
ctx.strokeStyle = circleObj.color;
ctx.lineCap = 'round';
ctx.stroke();
ctx.closePath();
}
let n = 1;
const tiktok = setInterval(() => {
n++
if(n/500>=1) {
circle(1);
clearInterval(tiktok)
} else {
circle(n / 500);
}
}, 10);
