canvas实现点击指定切换元素的圆形弧线进度条动画效果

这是一个使用画布canvas做的通过点击元素实现弧线运动到指定位置的动画效果。实现原理和前面分享的《Canvas百分比动画进度条》教程一样，区别是增加了一个点击事件来传递参数使弧线动画运动到指定位置。思路很简单，代码也很简单。

HTML代码：

<div class="canvas">
    <canvas id="circle" width="644" height="640"></canvas>
</div>
<div id="add">前进</div>
<div id="del">后退</div>

JS代码：

var circle = document.getElementById('circle'), //获取canvas对象
    context = circle.getContext('2d'), ////获取2d上下文
    centerX = (circle.width-4)/2, //圆的X轴中心点
    centerY = (circle.width-4)/2, //圆的Y轴中心点
    lineWidth = '12', //圆框线的大小
    radius=centerX-lineWidth/2, //圆的半径
    rad = Math.PI*2/100, //圆周为360度，Math.PI是半弧180度，乘以2为一周360度，拆成100分，360度的百分之一
    n=0, //从百分之n开始计算
    dir=true, //判断方向
    result = 26;//开起位置
    
var gradient = context.createLinearGradient(0, 0, circle.width-4, circle.height); //渐变
gradient.addColorStop(0, "#fff"); //渐变
gradient.addColorStop(0.45, "#c40c22"); //渐变

function whiteLine(){ //画一个底圆
    context.save();
    context.beginPath();
    context.strokeStyle='#293742';
    context.lineWidth=lineWidth;
    context.lineCap = 'round';
    context.arc(centerX, centerY, radius, -Math.PI*0.67, Math.PI*0.62, false); //arc() 方法创建弧/曲线（用于创建圆或部分圆）,参数自行去了解
    context.stroke();
    context.closePath();
    context.restore();
}  
function redLine(n){ //画一个进度圆
    context.save();
    context.strokeStyle=gradient;
    context.lineWidth=lineWidth;
    context.lineCap = 'round';
    context.beginPath();
    context.arc(centerX, centerY, radius, -Math.PI*0.67, -Math.PI*0.67+rad*n, false);
    context.stroke();
    context.closePath();
    context.restore();
}
function smallCircle(){ //圆边上的小圆
    const circleX = centerX + Math.floor(Math.cos(rad*n-Math.PI*0.67) * radius);//圆的参数方程：x = a + cosθ * r(θ为参数）
    const circleY = centerY + Math.floor(Math.sin(rad*n-Math.PI*0.67) * radius);//圆的参数方程：y = b + sinθ * r (θ为参数）
    context.save();
    context.beginPath();
    context.strokeStyle='#49a1f4';
    context.lineWidth='9';
    context.lineCap = 'round';
    context.fillStyle = '#fff';
    context.fill();
    context.arc(circleX, circleY, 7, 0, -Math.PI*2, false);
    context.stroke();
    context.closePath();
    context.restore();
}
;(function drawLine(){
    var req;
    context.clearRect(0,0,circle.width,circle.height);
    whiteLine();
    redLine(n);
    smallCircle();
    if(dir){
        if(n<result){
            n = n + 1;
            req = requestAnimationFrame(drawLine);
        }else{
            n=result;
            cancelAnimationFrame(req);
        }
    }else{
        if(n>result){
            n = n - 1;
            req = requestAnimationFrame(drawLine);
        }else{
            n=result;
            cancelAnimationFrame(req);
        }
    }
    document.getElementById('add').onclick=function(){
        result = result < 66 ? result + 10 : result;
        dir = true;
        drawLine();
    }
    document.getElementById('del').onclick=function(){
        result = result > 16 ? result - 10 : result;
        dir = false;
        drawLine();
    }
})();

Canvas arc() 方法

中心：arc(100,75,50,0*Math.PI,1.5*Math.PI)
起始角：arc(100,75,50,0,1.5*Math.PI)
结束角：arc(100,75,50,0*Math.PI,1.5*Math.PI)

示例：比如 2*Math.PI 结束点就是开始点。如果开始角想在结束角的位置，可以用 -Math.PI * 0.5