2018-04-27 Js实现环形进度条

最近做了一个在线考试结果的进度环，由于各种原因没有用很多现成已有的插件啊之类的

各种东西，就自己用通过查资料，在别人的基础上改写了一个环形进度条

Html：

<div id="fDiv" style="width:100%;margin-top:50px;">
    <canvas id="myCanvas">
    </canvas>
</div>

Js：

//先在画布上画上一个底环
$scope.drawRing = function() {
    //先创建一个canvas画布对象，设置宽高
    var c = document.getElementById('myCanvas');
    var ctx = c.getContext('2d');
    ctx.canvas.width = 220;
    ctx.canvas.height = 220;
    //起始一条路径
    ctx.beginPath();
    //设置当前线条的宽度
    ctx.lineWidth = 10;
    ctx.setLineDash([2, 4]); //实现间隔效果 每隔4单位 空2单位
    //设置笔触的颜色
    ctx.strokeStyle = '#d1d6d7';
    //arc()方法创建弧/曲线（用于创建圆或部分圆）arc(圆心x,圆心y,半径,开始角度,结束角度)
    ctx.arc(110, 110, 100, -90 * Math.PI / 180, 2 * Math.PI);
    //绘制已定义的路径
    ctx.stroke();
}

//根据传入的val的值的不同，以-90度也就是坐标轴y轴的正方向，沿着底环在画布上再画一个新的弧形，这样就会呈现进度的效果
$scope.loadCircle = function(val) {
    //先创建一个canvas画布对象，设置宽高
    var c = document.getElementById('myCanvas');
    var ctx = c.getContext('2d');
    //绘制根据百分比变动的环
    ctx.beginPath();
    ctx.lineWidth = 10;
    ctx.setLineDash([2, 4]); //实现间隔效果
    //设置开始处为0点钟方向（-90*Math.PI/180）
    //x为百分比值（0-100）
    ctx.arc(110, 110, 100, -90 * Math.PI / 180, (val * 3.6 - 90) * Math.PI / 180);
    ctx.stroke();
    ctx.fillText("", 110, 170); //在画布内某个位置画上文字，函数三个参数：内容，x坐标，y坐标
}

///调用上面的函数
$scope.search = function() {
    var socre = 90;
    $scope.drawRing();
    $scope.loadCircle(score);

    //下面注释的代码，是为了实现进度环的加载动画：自己想好动画的速度
    //比如我写的这样：默认为1000毫秒内加载完，如果分数大于30小于60则1500毫秒等等...然后设置每100毫秒画一次
    //比如这里分数是90，那么要在2000毫秒内画完，每100毫秒画一次，那么可以将90分成20分，第一次画20/1，第二次重新画2/20，以此往下，知道2000毫秒跑完
    //var timer = 0;
    //var seconds = 1000;//毫秒
    //if (score <= 30)
    //    seconds = 1000;
    //else if (score <= 60)
    //    seconds = 1500;
    //else
    //    seconds = 2000;
    //var eachval = (100 / seconds) * score;
    //var val = 0;
    //timer = $interval(function () {
    //    val += eachval;
    //    $scope.loadCircle(val);
    //    seconds -= 100;
    //    if (seconds <= 0)
    //        $interval.cancel(timer);
    //}, 100);
}

本文作者：陈孚楠