Холст прогрессивное колесо

Question

Я пытаюсь создать колесо прогресса, которое соответствует макету, указанному

https://imgur.com/a/UxiOSJh

Прогресс на данный момент ...

https://imgur.com/a/hJDmASt

Я сблизился с другим разработчиком и гуглином, но не знал, как завершить макет.Главным образом, завершая круг в меньший круг и основывая% круга на внешних переменных.

Идея состоит в том, что я сделаю некоторую математику, основанную на кратном 6. Поэтому, если пользователь равен 1 /6, то график заполнен на 16,6.3/6 50% и так далее.Нужно знать, где я могу ввести это.

var counter = document.getElementById('counter').getContext('2d');
var no = 50; // Starting Point
var pointToFill = 4.72; //Point from where you want to fill the circle
var cw = counter.canvas.width; //Return canvas width
var ch = counter.canvas.height; //Return canvas height
var diff; // find the different between current value (no) and trageted value (100)

function fillCounter() {
  diff = ((no / 100) * Math.PI * 2 * 10);
  counter.clearRect(0, 0, cw, ch); // Clear canvas every time when function is call
  counter.lineWidth = 15; // size of stroke

  counter.fillStyle = '#000'; // color that you want to fill in counter/circle
  counter.strokeStyle = '#489DA0'; // Stroke Color
  counter.textAlign = 'center';
  counter.font = "25px monospace"; //set font size and face
  counter.lineCap = "round";
  counter.fillText(no + '%', 100, 110); //fillText(text,x,y);
  counter.beginPath();
  counter.arc(100, 100, 90, pointToFill, diff / 10 + pointToFill); //arc(x,y,radius,start,stop)

  counter.stroke(); // to fill stroke

  // now add condition

  if (no >= 80) {
    clearTimeout(fill); //fill is a variable that call the function fillcounter()}
    no++;
  }
}

//now call the function
var fill = setInterval(fillCounter, 100); //call the fillCounter function after every 50MS

<canvas height="200" width="200" id="counter">

Answer 1

Я думаю, вы очень близко подошли, все, что вам было нужно, это меньший круг.

Вот как вы это делаете:

var counter = document.getElementById('counter').getContext('2d');
var no = 50; // Starting Point
var pointToFill = 4.72; //Point from where you want to fill the circle
var cw = counter.canvas.width; //Return canvas width
var ch = counter.canvas.height; //Return canvas height
var diff; // find the different between current value (no) and trageted value (100)

function fillCounter() {
  diff = ((no / 100) * Math.PI * 2 * 10);
  counter.clearRect(0, 0, cw, ch); // Clear canvas every time when function is call

  counter.fillStyle = '#000'; // color that you want to fill in counter/circle
  counter.strokeStyle = '#489DA0'; // Stroke Color
  counter.textAlign = 'center';
  counter.font = "25px monospace"; //set font size and face
  counter.lineCap = "round";
  counter.fillText(no + '%', 100, 110); //fillText(text,x,y);

  counter.beginPath();
  counter.lineWidth = 2;
  counter.arc(100, 100, 90, 0, Math.PI * 2)
  counter.stroke();

  counter.beginPath();
  counter.lineWidth = 15; // size of stroke
  counter.arc(100, 100, 90, pointToFill, diff / 10 + pointToFill);
  counter.stroke();
}


fillCounter()

<canvas height="200" width="200" id="counter">

Теперь у нас есть 2 дуги: одна - полный круг (lineWidth = 2)
, а вторая - частичная с (lineWidth = 15)