如何用HTML5写个进度环插件，代码是什么-群英

上一篇：如何用HTML+jQuery实现鼠标悬浮展现列表切换下一篇：HTML超连接的使用是什么样，有何不同吗

这篇文章主要讲解了“如何用HTML5写个进度环插件，代码是什么”，文中的讲解内容简单、清晰、详细，对大家学习或是工作可能会有一定的帮助，希望大家阅读完这篇文章能有所收获。下面就请大家跟着小编的思路一起来学习一下吧。

前几天做了一个进度条的插件。今天我用HTML5的arc做一个简单的进度环的插件。

代码演示
事实上非常easy的。相同，我们先用一个实例：
配置js代码

 var setting = {
            id: "canvas",//画布id 不可省略
            raduis:"30",//进度环半径
            x: 90,//进度环圆心x坐标
            y: 90,//进度环圆心y坐标
            width: 10,//进度环宽度 
            time: 100,//进度刷新时间间隔 可省略 默觉得1000毫秒
            foregroundColor: "black",
            backgroundColor: "blue",
            runFunction: function () {
                return 2;
            },//每次变化的速率 度数
            endFunction: function () {//结束时调用的函数
                //alert("end");
            },
            startFunction: function () {//结束时调用的函数
                //alert("start");
            },
            showText: true
        }

初始化

 initProgressRing(setting);

html代码

<div class="context">
        <canvas id="canvas"></canvas>
    </div>

这样就完毕了一个简单的进度环。当然。得引入initProgressRing.js

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

以下我们看initProgressRing怎么实现的呢？
事实上非常easy。不说多了。直接上代码

function initProgressRing(setting) {
            var initProgressRing = {};
            initProgressRing.all = 0;
            initProgressRing.startY = Math.PI;
            initProgressRing.endY1 = initProgressRing.startY + 2 * Math.PI;
            initProgressRing.endY2 = initProgressRing.startY - 2 * Math.PI;
            //调用開始函数
            if (setting.startFunction) {
                setting.startFunction();
            }
            //初始化默认值函数
            initProgressRing.initSet = function (set) {
                if (!set.counterclockwise) {
                    set.counterclockwise = false;
                }
                if (!set.time) {
                    set.time = 1000;
                }
                if (!set.width) {
                    set.width = 10;
                } 
                if (!set.backgroundColor) {
                    set.color = "red";
                }
                if (!set.foregroundColor) {
                    set.color = "blue";
                }
                if (!set.radius) {
                    set.radius = 10;
                }
                return set;
            }
            //初始化默认值
            setting = initProgressRing.initSet(setting);
            //刷新函数
            initProgressRing.remainTime = function () {
                initProgressRing.all += setting.runFunction();
                initProgressRing.startY += 2 * Math.PI / 360 * setting.runFunction();
                initProgressRing.text = Math.round((initProgressRing.all / 360 * 10000) / 100) + "%";
               //推断结束
                if (initProgressRing.startY > initProgressRing.endY1 || initProgressRing.startY < initProgressRing.endY2) {
                    initProgressRing.text = "100%";
                    clearInterval(initProgressRing.run);
                    if (setting.endFunction) {
                        setting.endFunction();//调用结束函数
                    }
                }
                initProgressRing.draw(setting.x, setting.y, setting.raduis, setting.width, setting.backgroundColor, setting.foregroundColor, setting.counterclockwise);

            }
            //初始化画布，调用刷新函数
            if (setting.id) {
                initProgressRing.canvas = document.getElementById(setting.id);
                console.log(setting.id);
                initProgressRing.context = initProgressRing.canvas.getContext("2d");
                initProgressRing.run = setInterval(initProgressRing.remainTime, setting.time);//1000为1秒钟
            } else {
                alert("初始化错误，没有id");
            }
            //画进度条
            initProgressRing.draw = function draw(x, y, raduis, width, backgroundColor, foregroundColor, counterclockwise) {
                //清除内容
                initProgressRing.context.clearRect(0, 0, canvas.width, canvas.height);
                initProgressRing.context.lineWidth = width;
                initProgressRing.context.beginPath();
                initProgressRing.context.strokeStyle = backgroundColor;
                initProgressRing.context.arc(x, y, raduis, 0, 2 * Math.PI, false);
                initProgressRing.context.stroke();
                initProgressRing.context.beginPath();
                initProgressRing.context.strokeStyle = foregroundColor;
                initProgressRing.context.arc(x, y, raduis, Math.PI, initProgressRing.startY, counterclockwise);
                initProgressRing.context.stroke();
                if (setting.showText) {
                    console.log(initProgressRing.text);
                    initProgressRing.context.fillText(initProgressRing.text, x - 7, y+5, 40);
                }
            }
        }