Canvas绘制动态圆环进度条

最终效果

##一、定义初始变量

letradius =140//外环半径letthickness =20//圆环厚度letinnerRadius = radius - thickness//内环半径letstartAngle = -90//开始角度letendAngle =180//结束角度letx =0//圆心x坐标lety =0//圆心y坐标letcanvas =document.getElementById('tutorial');canvas.width =300;canvas.height =300;letctx = 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, angle2Radian(endAngle), angle2Radian(startAngle), true)

    //计算外环与内环第二个连接处的中心坐标

    let twoCtrlPoint = calcRingPoint(x, y, innerRadius + thickness / 2, startAngle)

    //绘制外环与内环第二个连接处的圆环

    ctx.arc(twoCtrlPoint.x, twoCtrlPoint.y, thickness / 2, angle2Radian(-90), angle2Radian(270))

    ctx.fill()

    // ctx.stroke()

}

###具体思路:

为了方便,代码中使用弧度的地方一律由角度转为弧度

1.绘制外环:

这一步最简单,直接按照官方的使用方法使用即可

2.绘制外环与内环连接处的第一个圆环

首先算出,外环结束处与内环开始处中间点的坐标

计算圆环上点的坐标公式为:

x = x + radius * Math.cos(angle * Math.PI / 180)

y = y + radius * Math.sin(angle * Math.PI / 180)

代入以上公式可算出圆环上任意一点的坐标,然后再以此为圆心,圆环厚度/2为半径 画圆环

3.绘制内环

这一步只需将半径缩短,并将绘制外环的开始角度与结束角度调换即可

4.绘制内环与外环连接处的第二圆环

和第二步同理,先计算出外环开始处与内环结束处中间点的坐标,然后再以此为圆心,圆环厚度/2为半径 画圆环

5.完成填充 到这一步,圆环就完成了

##四、动态进度条

//进度条动画

ctx.fillStyle = "#e87c7c";

let tempAngle = startAngle

let twoEndAngle = 0

let step = (twoEndAngle - startAngle) / 100

let numberSpan = document.querySelector('.number')

let count = 0

let inter = setInterval(() => {

    if (tempAngle > twoEndAngle) {

        clearInterval(inter)

    } else {

        count++

        numberSpan.innerText = count

        tempAngle += step

    }

    renderRing(startAngle, tempAngle)

}, 16.7)

动态计算结束角度,然后设定一个计数器,重复执行渲染方法。

##五、完整代码

   

   

   

    canvas

   

   

       

        0

        服务分

   

   

你可能感兴趣的:(Canvas绘制动态圆环进度条)