javascript - 在javascript中显示百分比弧

Question

<分区>

Answer 1

Santho 的答案对于 SVG 是正确的，但我想提及 HTML5 的 Canvas 元素作为替代:

/**
 * arcPercentage
 *
 * @param {{ radius?: number, rate?: number, color?: string }} parameters
 * @returns
 */
function arcPercentage(parameters) {
  var radius = (parameters.radius !== void 0 ? parameters.radius : 100);
  var rate = (parameters.rate !== void 0 ? parameters.rate : 1);
  var color = (parameters.color !== void 0 ? parameters.color : "rgba(255,0,0,1)");
  var c = document.createElement("canvas");
  var size = c.width = c.height = radius * 2;
  var ctx = c.getContext("2d");
  if (rate == 0) {
    return c;
  }
  ctx.fillStyle = color;
  ctx.beginPath();
  //Start in origo
  ctx.arc(radius, radius, 0, 0, 0);
  //Move to start position
  ctx.arc(radius, radius, radius, 0, 0);
  //Arc to percentage
  ctx.arc(radius, radius, radius, 0, (Math.PI * 2) * rate);
  //move to origo
  ctx.arc(radius, radius, 0, (Math.PI * 2) * rate, (Math.PI * 2) * rate);
  ctx.fill();
  ctx.closePath();
  return c;
}

//TEST
//Get nodes
var inputNode = document.getElementById("circle-input");
var imageNode = document.getElementById("circle-image");
//Bind event
inputNode.onchange = inputNode.onkeyup = inputNode.onmouseup = function() {
  //Only fire if valid input
  if (inputNode.validity.valid) {
    //Parse value
    var value = parseInt(inputNode.value, 10) / 100;
    //Draw the arc
    imageNode.src = arcPercentage({
      color: "blue",
      radius: 100,
      rate: value
    }).toDataURL();
  }
};

<input id="circle-input" min="0" max="100" type="number" value="0">
<br/>
<img id="circle-image">