Canvas绘制动态圆环进度条

最终效果

##一、定义初始变量

let radius = 140 //外环半径
let thickness = 20 //圆环厚度
let innerRadius = radius - thickness //内环半径
let startAngle = -90 //开始角度
let endAngle = 180 //结束角度
let x = 0 //圆心x坐标
let y = 0 //圆心y坐标
let canvas = document.getElementById('tutorial');
canvas.width = 300;
canvas.height = 300;

let ctx = canvas.getContext('2d');
ctx.translate(canvas.width / 2, canvas.height / 2);//将绘图原点移到画布中央
ctx.rotate(angle2Radian(225)) //将画布旋转225度
ctx.fillStyle = "#f2d7d7"; //初始填充颜色

二、工具方法

 //计算圆环上点的坐标
function calcRingPoint(x, y, radius, angle) {
    let res = {}
    res.x = x + radius * Math.cos(angle * Math.PI / 180)
    res.y = y + radius * Math.sin(angle * Math.PI / 180)
    return res
}

//弧度转角度
function radian2Angle(radian) {
    return 180 * radian / Math.PI
}

//角度转弧度
function angle2Radian(angle) {
    return angle * Math.PI / 180
}

三、渲染方法

//渲染函数
function renderRing(startAngle, endAngle) {
     ctx.beginPath();

    //绘制外环
    ctx.arc(x, y, radius, angle2Radian(startAngle), angle2Radian(endAngle))

    //计算外环与内环第一个连接处的中心坐标
    let oneCtrlPoint = calcRingPoint(x, y, innerRadius + thickness / 2, endAngle)

    //绘制外环与内环第一个连接处的圆环
    ctx.arc(oneCtrlPoint.x, oneCtrlPoint.y, thickness / 2, angle2Radian(-90), angle2Radian(270))

    //绘制内环
    ctx.arc(x, y, innerRadius, angle2Radi