评分样式圆环进度

展示效果

HTML代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <canvas id="canvas">
            <p>抱歉，您的浏览器不支持canvas</p>
        </canvas>
    </body>
</html>

JS代码

<script type="text/javascript">
function toCanvas(id ,progress,length,lineWidth){
    //canvas进度条
    var canvas = document.getElementById(id),
    ctx = canvas.getContext("2d");
    canvas.width = length; //画布宽度
    canvas.height = length; //画布高度
    var percent = progress,  //最终百分比
    circleX = length / 2,  //中心x坐标
    circleY = length / 2,  //中心y坐标
    //lineWidth = 10,  //圆形线条的宽度
    radius = length/2-lineWidth/2, //圆环半径
    //fontSize = 20; 
    fontSize = ((length / 2 - lineWidth) / 2); //字体大小

    //画圆---背景灰色圆环
    function circle(cx, cy, r) {
        ctx.beginPath();
        ctx.lineWidth = lineWidth;
        ctx.strokeStyle = '#eee8fb';
        ctx.arc(cx, cy, r, Math.PI*0, Math.PI * 2);
        ctx.stroke();
    }

    //画弧线 ---- 显示实线带颜色
    function sector(cx, cy, r, i, anti) {
        ctx.beginPath();
        ctx.lineWidth = lineWidth;

        // 渐变色 - 可自定义
        /*var linGrad = ctx.createLinearGradient(
            circleX-radius-lineWidth, circleY, circleX+radius+lineWidth, circleY
        );*/
        var linGrad = ctx.createLinearGradient(length, 0, 0, 0);
        linGrad.addColorStop(0, '#5514f2');
        linGrad.addColorStop(1, '#7633f8');
        ctx.strokeStyle = linGrad;

        //圆弧两端的样式
        ctx.lineCap = 'round';
        //绘制顺时针的1/4圆 //起点和结束点
        var starAngle = - 0.2;
        var endAngle = - 0.2;
        if ( percent <= 50 ){ 
            starAngle = 0.5;
            endAngle = 0.5;
        } else if (percent < 80 ){
            starAngle = 0.1;
            endAngle = 0.1;
        } else if ( percent < 90 ){
            starAngle = - 0.1;
            endAngle = - 0.1;
        } else if ( percent < 100 ){
            endAngle = - 0.25;
        }
        //圆弧
        if( percent != 0 ){ //如果评分不为零，则不显示灰色圆环，显示实色圆环
            ctx.arc(
                cx, cy, r,
                starAngle * Math.PI,
                endAngle * Math.PI + i * 0.02 * Math.PI,
                false
            );
        }
        ctx.stroke();
    }

    //刷新
    function loading() {
        if (process >= percent) {
            clearInterval(circleLoading);
        }

        //清除canvas内容
        ctx.clearRect(0, 0, circleX * 2, circleY * 2);

        //中间的字
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        var val = percent/100*5; //占比百分数/5=评分
      
        //圆形
        circle(circleX, circleY, radius);
        if( percent == 0){ //如果评分为零，则显示灰色圆环
            ctx.font = 16 + 'px 微软雅黑';
            ctx.fillStyle = '#eee8fb';
            var text = "暂无评分";
        } else {
            ctx.font = fontSize + 'px 微软雅黑';
            ctx.fillStyle = '#5514f2';
            var text = Math.round(val * 10) / 10; //四舍五入保留一位小数
        }
        ctx.fillText(text, circleX, circleY+5);  //圆环中间显示的文字和文字居中  

        //圆弧
        sector(circleX, circleY, radius, process);

        process += 1;
    }

    var process = 0;  //进度
    var circleLoading = window.setInterval(function () {
        loading();
    }, 20);
}

var score = 4.5; //评分
if( score == 0 || score == "" || score == null || score == 'undifined' || score > 5 || score < 0 || isNaN(score)){
    score = 0;
}
var num = Math.round(score /5*100); //评分转换为百分比数，不带百分号
toCanvas('canvas',num,100,10);//id，分数，画布大小，圆形线条的宽度
</script>

 

posted @ 2019-04-19 14:58  蘩星靛点  阅读(329)  评论(0)  编辑  收藏  举报