圆形倒计时进度条(canvas,requestAnimationFrame)

(function(exports) {
‘use strict’;
let canvas = document.getElementById(‘timer-canvas’);
let context = canvas.getContext(‘2d’);
let centerX = canvas.width / 2;
let centerY = canvas.height / 2;
let angle = 0;
let animation;
let timeDuration;

function orangeCircle(){
angle += 1;
context.save();
context.strokeStyle = ‘#ff4f1a’;
context.lineWidth = 20;
context.beginPath();
context.lineCap = ‘round’;
context.arc(centerX, centerY, 145 ,
(-Math.PI / 2) - Math.PI * 2 * (angle / 3600 / timeDuration), 1.5 * Math.PI, true);
context.stroke();
context.closePath();
context.restore();
}

function greyCircle(){
context.save();
context.beginPath();
context.strokeStyle = ‘#14141a’;
context.lineWidth = 20;
context.arc(centerX, centerY, 145 , 0, Math.PI * 2, false);