圆形滚动条效果

2019-04-17 15:51:16 阅读：349 来源： 互联网

标签：效果 length 滚动条圆形 context var Progress 100 Math

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<head>
<title></title>

<style type="text/css">
*{
    margin: 0;
    padding: 0;
}
</style>

<script type="text/javascript" src="js/Progress.js"></script>

</head>
<body>

<canvas id="canvas1"></canvas>
<canvas id="canvas2"></canvas>
<canvas id="canvas3"></canvas>
<canvas id="canvas4"></canvas>
<canvas id="canvas5"></canvas>
<canvas id="canvas6"></canvas>
<canvas id="canvas7"></canvas>
<canvas id="canvas8"></canvas>
<canvas id="canvas9"></canvas>
<canvas id="canvas10"></canvas>

<script type="text/javascript">
window.onload = function(){
    var num = Math.round(4.8/5*100);
    var num2 = Math.round(4.9/5*100);
    new Progress().renderOne('canvas1',100,5,10);//id,大小,边框粗细,百分比
    new Progress().renderOne('canvas2',100,5,20);
    new Progress().renderOne('canvas3',100,5,30);
    new Progress().renderOne('canvas4',100,5,40);
    new Progress().renderOne('canvas5',100,5,50);
    new Progress().renderOne('canvas6',100,5,60);
    new Progress().renderOne('canvas7',100,2,70);
    new Progress().renderOne('canvas8',100,10,num);
    new Progress().renderOne('canvas9',100,10,num2);
    new Progress().renderOne('canvas10',100,10,100);
}
</script>

</body>
</html>

var Progress = function() {
    var progress = {
        textheight: null,
        renderOne: function(id, length, r, percent) {
            var canvas = document.getElementById(id);
            var context = canvas.getContext("2d");
            canvas.width = length;
            canvas.height = length;
            var i = 0;
            var interval = setInterval(function() {
                i++;
                progress.render(context, length, r, i, percent);
                if (i >= percent) {
                    clearInterval(interval)
                }
            },
            10)
        },
        render: function(context, length, r, i, percent) {
            context.clearRect(0, 0, length, length);
            context.beginPath();//起始一条路径，或重置当前路径

            var gradient = context.createLinearGradient(length, 0, 0, 0); //定义一个渐变作为填充样式
            gradient.addColorStop("0", "#5514f2");
            gradient.addColorStop("1.0", "#7633f8");

            context.strokeStyle = gradient; //设置或返回用于笔触的颜色、渐变或模式，这里是渐变
            context.lineWidth = r;//设置或返回当前的线条宽度

            //绘制顺时针的1/4圆
            if(percent==100){ //如果是百分百的时候显示起点和结束点都是一个位置
                context.arc(length / 2, length / 2, length / 2 - r, -0.2 * Math.PI, -0.2 * Math.PI + i * 0.02 * Math.PI, false);
            }else{
                context.arc(length / 2, length / 2, length / 2 - r, -0.2 * Math.PI, -0.25 * Math.PI + i * 0.02 * Math.PI, false);
            }
            //context.arc(length / 2, length / 2, length / 2 - r, 1.8 * Math.PI, 1.78 * Math.PI + i * 0.02 * Math.PI, false);
            context.stroke(); //绘制已定义的路径

            context.closePath(); //创建从当前点回到起始点的路径
            context.beginPath(); //起始一条路径，或重置当前路径
            context.lineCap = 'round';//设置或返回线条的结束端点样式,butt 默认。向线条的每个末端添加平直的边缘。round   向线条的每个末端添加圆形线帽。square  向线条的每个末端添加正方形线帽 。

            //设置字体样式
            context.font = "bold " + (length / 2 - 1 * r) / 2 + "px 微软雅黑";
            context.fillStyle = "#5515f2";

            //var text = percent + "%";//占比百分数
            var val = percent/100*5; //占比百分数/5=评分
            var text = Math.round(val * 10) / 10; //四舍五入保留一位小数
            textwidth = context.measureText(text).width; //在画布上输出文本之前，检查字体的宽度：
            if (this.textheight == null) {
                var div = document.createElement("div");
                document.body.appendChild(div);
                div.innerHTML = text;
                div.style.fontSize = ((length / 2 - 1 * r) / 2) + "px";
                this.textheight = div.offsetHeight;
                div.parentNode.removeChild(div)
            }
            textheight = this.textheight;
            context.fillText(text, (length - textwidth) / 2, length / 2 + textheight / 4);
            context.fill();
            context.closePath()
        }
    };
    return progress
};

标签：效果,length,滚动条,圆形,context,var,Progress,100,Math
来源： https://www.cnblogs.com/weiwei0111/p/10724009.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

圆形滚动条效果