HTML5 Simple progress bar Plugin

Today I learned the HTML5 line, so I have the idea of making a simple progress bar plugin
Let's start with an example.
Here is the HTML code

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

Then JS configuration parameters

 varsetting = {ID:"Canvas",//Canvas ID not omittedWidth +,//progress bar height can be omittedTime -,//The progress refresh interval can be omitted by default of 1000 millisecondsColor"BLACK",//progress bar color can be omitted by default to BuleRunX2: function (x) {//Each refresh call changes the X2 coordinates of the function, can omit the same as Runx1,runy1,runy2x = x +2;returnX }, Endfunction: function () {function called at end of//}, Startfunction: function () {function called at end of//}        }

And then

initProgressBar(setting);

Well, of course, the first thing to introduce a custom progress bar JS

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

Just such a simple HTML5 canvas implementation of the progress bar is implemented
Let's start with the API, the API is simple, only a few parameters, generally only need an ID and a change function can implement a simple progress bar
ID of the ID canvas
Width: The height of the progress bar can also be called width default 10
Time: Refresh, that is, how often the function is executed by default 1000 milliseconds
Color: Default red for progress bar
LineCap: Style is as default as HTML5 LineCap style round
RunX2: Each refresh call change function, each refresh call change X2 coordinates function, can omit runx1,runy1,runy2 as a total of two coordinates x1,y1,x2,y2
Startfunction: function called before the start
Endfunction: function called after end
Isn't it simple? Then we now look at the plug-in implementation of the source code, but also very simple, but 100 lines. Use JS setinterval to achieve timed refresh.

function Initprogressbar (setting) {var Initprogressbar = {};Call the Start function if (setting. Startfunction) {Setting. Startfunction();}//Initialize default value function Initprogressbar. Initset= function (Set) {if (!Set. Time) {Set. Time= +;} if (!Set. Width) {Set. Width=Ten;} if (!Set. Color) {Set. Color="Red";} if (!Set. LineCap) {Set. LineCap="Round";} returnSet;}//Initialize default value setting = Initprogressbar. Initset(setting);Refresh function Initprogressbar. Remaintime= function () {if (setting. RunX1) {x1 = setting. RunX1 (x1);if (x1 >= endw) {x1 = ENDW;}} if (setting. Runy1) {y1 = setting. Runy1 (y1);if (y1 >= endh) {y1 = Endh;}} if (setting. RunX2) {x2 = setting. RunX2 (x2);if (x2 >= endw) {x2 = ENDW;}} if (setting. Runy2) {y2 = setting. Runy2 (y2);if (y2 >= endh) {y2 = Endh;}} Initprogressbar. Draw(x1, y1, x2, y2, setting. Width, setting. LineCap, setting. Color);End of Judgment if (y2 >= endh | | y1 >= ENDH | | x1 >= ENDW | | x2 >= ENDW) {clearinterval (initprogres SBar. Run);if (setting. Endfunction) {Setting. Endfunction();//call End Function}}}//Initialize the canvas, call the Refresh function if (setting. ID) {Initprogressbar. Canvas= document. getElementById(Setting. ID);Console. Log(Setting. ID);Initprogressbar. Context= Initprogressbar. Canvas. GetContext("2d");Initprogressbar. Run= SetInterval (Initprogressbar. Remaintime, setting. Time);//1000 for 1 seconds} else {alert ("Initialization error, no ID");} var x1 = setting. Width/2;//coordinates of the starting point xvar y1 = setting. Width/2;//coordinates y of the starting pointvar x2 = Setting. Width/2;//coordinates of the end point xvar y2 = setting. Width/2;//coordinates y of the end pointvar Endh = Initprogressbar. Canvas. Height-setting. Width;var ENDW = Initprogressbar. Canvas. Width-setting. Width;Draw progress Bar Initprogressbar. Draw= function Draw (x1, y1, x2, y2, width, linecap, color) {//Clear contents Initprogressbar. Context. Clearrect(0,0, canvas. Width, canvas. Height);Initprogressbar. Context. Beginpath();Initprogressbar. Context. Strokestyle= Color;Initprogressbar. Context. LineCap= LineCap;Initprogressbar. Context. MoveTo(x1, y1);Initprogressbar. Context. LineWidth= width;Initprogressbar. Context. LineTo(x2, y2);Initprogressbar. Context. Stroke();}}

In this way, a custom widget is complete.

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

HTML5 Simple progress bar Plugin