Question

现在我的画布从90度开始，但我希望它从0度开始。弧从中间开始，但我希望它从顶部中心开始。如何从中心顶部开始填充弧现在，从中间开始填充圆圈。

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();
  }
};

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

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

</body>
</html>

如何从顶部开始画布弧填充

0 个答案: