<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body {
background: #000;
text-align: center;
}
svg {
margin-top: 70px;
background: #fff;
}
path {
fill: none;
stroke: #ddd;
stroke-width: 6;
}
</style>
</head>
<body>
<svg xmlns='http://www.w3.org/2000/svg'
width='1000'
height='600'>
</svg>
<script>
var cx = 500,
cy = 300,
r = 150,
oSvg = document.querySelector('svg');
function d2r(deg) {
return deg * Math.PI / 180;
}
// inner ring 内环
ring(-150,150,'#ddd');
// outer ring 外环
var start = -150,
end = 150,
current = start,
step = 1,
timer = 0;
timer = setInterval(function() {
current += step;
if(current >= end) {
current = end;
clearInterval(timer);
}
ring(-150,current,'red');
},1000/20);
function ring(startAng,endAng,stroke) {
var x1 = cx + r * Math.sin(d2r(startAng));
var y1 = cy - r * Math.cos(d2r(startAng));
var x2 = cx + r * Math.sin(d2r(endAng));
var y2 = cy - r * Math.cos(d2r(endAng));
var oPath = document.createElementNS('http://www.w3.org/2000/svg','path');
oPath.setAttribute('d',`
M${x1},${y1}
A${r} ${r} 0 ${Math.abs(endAng - startAng) >= 180 ? 1 : 0} 1 ${x2} ${y2}
`);
oPath.style.stroke = stroke;
oSvg.appendChild(oPath);
}
console.log(ring );
</script>
</body>
</html>
