Круглые индикаторы выполнения с использованием тега Canvas

Это руководство предназначено для создания закрашенных круглых индикаторов выполнения с помощью тега Canvas, как показано ниже:

Прежде чем переходить к коду, нам нужно понять, как нарисовать круг с помощью тега Canvas.

Для тега Canvas круг представлен следующим образом:

Итак, имея это в виду, чтобы нарисовать круг с помощью тега Canvas, мы можем использовать следующий код:

HTML

<canvas width="150" height="150" id="canvas" />

JS

let canvas = document.getElementById("canvas");
let context = canvas.getContext("2d");
let centerX = canvas.width / 2;
let centerY = canvas.height / 2;
let radius = 70;
    
/* draw the circle */ 
/* begin the path */
context.beginPath();
/* move to the center of the circle */
context.moveTo(centerX, centerY); 
/* draw arc from 0 to 2 * Math.PI which is equivalent to 360 deg */
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
/* close the path */
context.closePath();
/* fill it with grey color */
context.fillStyle = "#ddd";
context.fill();
/* give a border to the circle */
context.strokeStyle = "rgba(200, 208, 218, 0.66)";
context.stroke();

Приведенный выше код рисует серый кружок. Теперь, чтобы показать зеленый кружок прогресса на основе процента прогресса, мы должны написать следующий код:

/* startAngle is from 0 deg which is 1.5 * Math.PI (refer to the diagram above) */
let startAngle = 1.5 * Math.PI;
/* calculate the value of one unit on the circle */
let unitValue = (Math.PI - 0.5 * Math.PI) / 25;
/* find the end angle based on the start angle */
if (percent >= 0 && percent <= 25) {
 endAngle = startAngle + (percent * unitValue);
} else if (percent > 25 && percent <= 50) {
 endAngle = startAngle + (percent * unitValue);
} else if (percent > 50 && percent <= 75) {
 endAngle = startAngle + (percent * unitValue);
} else if (percent > 75 && percent <= 100) {
 endAngle = startAngle + (percent * unitValue);
}
    
/* draw the green circle */
context.beginPath();
context.moveTo(centerX, centerY);
context.arc(centerX, centerY, radius, startAngle, endAngle, false);
context.closePath();
context.fillStyle = "#2cb191";
context.fill();

Это рисует зеленый кружок прогресса.

Полный код показан ниже:

function drawProgressCircle (percent) {
  let canvas = document.getElementById("canvas");
  let context = canvas.getContext("2d");
  let centerX = canvas.width / 2;
  let centerY = canvas.height / 2;
  let radius = 70;
    
  /* draw the grey circle */ 
  context.beginPath();
  context.moveTo(centerX, centerY); 
  context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
  context.closePath();
  context.fillStyle = "#ddd";
  context.fill();
  context.strokeStyle = "rgba(200, 208, 218, 0.66)";
  context.stroke();
  
  /* draw the green circle based on percentage */
  let startAngle = 1.5 * Math.PI;
  let unitValue = (Math.PI - 0.5 * Math.PI) / 25;
  if (percent >= 0 && percent <= 25) {
     endAngle = startAngle + (percent * unitValue);
  } else if (percent > 25 && percent <= 50) {
     endAngle = startAngle + (percent * unitValue);
  } else if (percent > 50 && percent <= 75) {
     endAngle = startAngle + (percent * unitValue);
  } else if (percent > 75 && percent <= 100) {
   endAngle = startAngle + (percent * unitValue);
  }
    
  context.beginPath();
  context.moveTo(centerX, centerY);
  context.arc(centerX, centerY, radius, startAngle, endAngle, false);
  context.closePath();
  context.fillStyle = "#2cb191";
  context.fill();
}
drawProgressCircle(80);