<h2>方案一</h2>
<div style="text-align:center;margin-bottom:20px;">
<svg style="width:250px; margin:0 auto;" viewBox="0,0,250,250"><circle cx="125" cy="125" r="122" stroke="#d9d9d9" fill="none" stroke-width="3"></circle><path class="path" id="pathss" stroke="#ff5256" fill="none" stroke-width="3" stroke-linecap="round" d="M 3 125 A 122,122 0 0 1 247,125"></path><text x="103" y="130" fill="#ccc" font-size="30" font-family="arial">svg</text></svg>
</div>

<div style="text-align:center;margin-bottom:20px;">
    <input type="range" style="margin:0 auto;" onchange="demo(this)" />
</div>

<div style="text-align:center;margin-bottom:20px;">
    <canvas id="tutorial" width="250" height="250" style="width:250px; margin:0 auto;"></canvas>
</div>

<hr/>
<h2>方案二</h2>

<div style="text-align:center;margin-bottom:20px;">
<svg style="width:250px; margin:0 auto;" viewBox="0,0,250,250"><circle cx="125" cy="125" r="122" stroke="#d9d9d9" fill="none" stroke-width="3"></circle><circle id="circle2" cx="125" cy="125" r="122" stroke="red" fill="none" stroke-width="3" stroke-linecap="round" stroke-dasharray="766.5486074759095" stroke-dashoffset="766.5486074759095"></circle><text x="103" y="130" fill="#ccc" font-size="30" font-family="arial">svg</text></svg>
</div>

<div style="text-align:center;margin-bottom:20px;">
    <input type="range" style="margin:0 auto;" onchange="demo2(this)" value="0" />
</div>
.path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  -webkit-animation: dash 3s ease forwards;
  animation: dash 3s ease forwards;
}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}
@-webkit-keyframes dash
{
  to {
    stroke-dashoffset: 0;
  }
}
circle{
transition: all 2s;
}
function draw(d) {
  var canvas = document.getElementById("tutorial");
  if (canvas.getContext) {
    var ctx = canvas.getContext("2d");

    ctx.fillStyle = "#fff";
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    //画圆形
    ctx.lineCap = "round";
    ctx.strokeStyle = "#d9d9d9"; //设置描边颜色
    ctx.lineWidth = 3; //设置描边宽度
    ctx.beginPath();
    ctx.arc(125, 125, 122, 0, Math.PI * 2, true); //画一个圆心坐标(125*125)半径122px的圆弧,从0开始到Math.PI*2结束,按照顺时针方向。
    ctx.stroke();
    ctx.strokeStyle = "#ff5256";
    var path = new Path2D(d);
    ctx.stroke(path);
    ctx.fillStyle = "#ccc";
    ctx.font = "30px arial";
    ctx.fillText("canvas", 80, 130); //实心文字
  }
}

function setRate(rate) {
  var angle = (rate / 100) * 360;
  var l, x, y;
  if (angle == 360) {
    angle = 359.99;
  }
  angle > 180 ? (l = 1) : (l = 0);
  x = 125 + 122 * Math.cos((180 - angle) * ((2 * Math.PI) / 360));
  y = 125 - 122 * Math.sin((180 - angle) * ((2 * Math.PI) / 360));
  return "M 3 125 A 122,122 0 " + l + " 1 " + x + "," + y;
}
draw('M 3 125 A 122,122 0 0 1 247,125')
function demo(obj) {
  var val = obj.value;
  document.querySelector("#pathss").setAttribute("d", setRate(val));
  draw(setRate(val));
}

/**
 * 方案二实现
 */
var circle2 = document.querySelector("#circle2");
var r = circle2.getAttribute("r");
var dasharray = 2 * Math.PI * r;
console.log(dasharray);
circle2.setAttribute("stroke-dasharray", dasharray);
circle2.setAttribute("stroke-dashoffset", dasharray);
function demo2(obj) {
  var val = (1 - obj.value / 100) * dasharray;
  document.querySelector("#circle2").setAttribute("stroke-dashoffset", val);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.