HTML5 simple progress bar plug-in

HTML5 simple progress bar plug-in

Today I learned to draw HTML5 lines, so I had the idea of creating a plug-in with a simple progress bar.
First come to an instance
The following is the html code.

Then configure parameters in js

Var setting = {id: canvas, // canvas id cannot be omitted width: 40, // The progress bar height can be omitted time: 100, // progress refresh interval can be omitted; default value: 1000 ms color: black; // progress bar color can be omitted; default value: bule runX2: function (x) {// every time you refresh the called function that changes the X2 coordinate, You can omit the functions runX1, runY1, and runY2, which are the same as x = x + 2; return x ;}, endFunction: function () {// The function called at the end}, startFunction: function () {// The function called at the end }}

Then

 initProgressBar(setting);

That's it. Of course, you should first introduce the js of the custom progress bar.

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

A simple HTML5 canvas progress bar is implemented.
Let's talk about the API first. The API is very simple and has only a few parameters. Generally, you only need an ID and a variable function to implement a simple progress bar.
Id canvas id
Width: the height of the progress bar, or the default width is 10.
Time: refresh time, that is, the interval at which the callback function is executed is 1000 milliseconds by default.
Color: the default red color of the progress bar.
LineCap: The style is the same as the lineCap style of html5. the default round
RunX2: The variable function of each refresh call. The variable X2 coordinate function of each refresh call can be omitted. Like runX1, runY1, and runY2, there are two coordinates: x1, y1, x2, y2.
StartFunction: the previously called function.
EndFunction: The function called after the end
Is it easy? Now let's look at the Source Code implemented by the plug-in. It's also very simple, but there are only 100 lines. Use setInterval of js to implement timed refresh.

Function initProgressBar (setting) {var initProgressBar ={}; // call the start function if (setting. startFunction) {setting. startFunction ();} // initialize the default function initProgressBar. initSet = function (set) {if (! Set. time) {set. time = 1000;} if (! Set. width) {set. width = 10;} if (! Set. color) {set. color = red;} if (! Set. lineCap) {set. lineCap = round;} return set;} // initialization Default Value setting = initProgressBar. initSet (setting); // refresh the initProgressBar function. 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); // judge the end if (y2> = endH | y1> = endH | x1> = endW | x2> = endW) {clearInterval (initProgressBar. run); if (setting. endFunction) {setting. endFunction (); // call the end function }}// initialize the canvas and 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 is 1 second} else {alert (initialization error, no id);} var x1 = setting. width/2; // the coordinate of the starting point x var y1 = setting. width/2; // y var x2 = setting. width/2; // the coordinate of the end point x var y2 = setting. width/2; // y var endH = initProgressBar. canvas. height-setting. width; var endW = initProgressBar. canvas. width-setting. width; // draw the progress bar initProgressBar. draw = function draw (x1, y1, x2, y2, width, lineCap, color) {// clear the 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 small custom plug-in is complete.