HTML5 Canvas draws a ring progress bar, html5canvas

HTML5 Canvas draws a ring progress bar, html5canvas

Recently, I was infatuated with canvas and made a personal website. It was useful to use a ring progress bar to record it.

There is no method to draw circles directly in the canvas, but there is a method to draw an arccontext.arcMethod,
The following describes how to use this method to create an image.

Introduction to the arc () method

Context. arc (x, y, r, sAngle, eAngle, counterclockwise );

Parameter description:

• X: x coordinate of the center of the circle
• Y: y coordinate of the center of the circle
• R: radius of the circle
• SAngle: Start angle, in radians. (The three o'clock position of the circular arc is 0 degrees)
• EAngle: end angle, in radians
• Counterclockwise: Optional. It is required that the drawing should be clockwise or clockwise. False = clockwise, true = clockwise. Default Value: false.

You can see how to draw a circle, as long as the starting angle and ending angle are a circle.

Draw the picture below!

Ring progress bar

The ring progress bar consists of two parts: a gray circle and a blue radian. That is to say, the gray circle and the blue Arc are in the same radius as the center. If you know the principle, do you think it is much simpler in an instant...

Step 1: Draw a gray circle

Function Circle () {this. radius = 100; // ring radius this. lineWidth = 25; // The width of the ring edge this. strokeStyle = '# ccc'; // edge color this. fillStyle = 'blue'; // fill color this. lineCap = 'round ';} Circle. prototype. draw = function (ctx) {ctx. beginPath (); ctx. arc( 250,250, this. radius, 0, Math. PI * 2, true); // the circle with the coordinate of 250. The starting angle here is 0, and the ending angle is Math. PI * 2 ctx. lineWidth = this. lineWidth; ctx. strokeStyle = this. strokeStyle; ctx. stroke (); // use stroke to draw a hollow circle. You can use the fill method to fill the colored shoes };

Of course, it cannot be drawn. Let's continue to look down.

Step 2: Draw a progress bar (in blue)

In this part, it is a blue arc with the same radius as the center of the gray circle.

Function Ring (startAngle, percent) {Circle. call (this); this. startAngle = startAngle | 3 * Math. PI/2; // The starting angle of the arc. this. percent = percent; // percentage of arc} Ring. prototype = Object. create (Circle. prototype); Ring. prototype. drawRing = function (ctx) {this. draw (ctx); // draw circles by calling the draw method of the Circle // angle ctx. beginPath (); var anglePerSec = 2 * Math. PI/(100/this. percent); // blue radian ctx. arc( 250,250, this. radius, this. startAngle, this. startAngle +, false); // The coordinates of the center must be consistent with those of the cirle ctx. strokeStyle = that. fillStyle; ctx. lineCap = that. lineCap; ctx. stroke (); ctx. closePath ();}

Isn't canvas defined yet? Come on ~

<canvas id="canvas" width="400" height="400"></canvas>

Get the context of the canvas:

var canvas = document.getElementById('canvas');var ctx =  canvas.getContext('2d');

Next we will call ourdrawRingRight

Var ring = new Ring (2 * Math. PI/3, 50); // from 2 * Math. start from PI/3 radian and ring with a progress of 50%. drawRing (ctx );

Here, the Progress ring shown in the figure is OK ~
Don't applaud too early. Since it's a progress bar, is it more beautiful to be dynamic!

Before moving, we first understand a concept. We know that coordinates are divided into four quadrants. If the center of the circle is the originarcHow does the method radians start? First look at the picture!
(Figure dug from w3school)

How are you doing? Do you think something is wrong ~ The first quadrant of primary school is 0 ~ π/2 (in the upper right corner), how does it look reversed? This is a difference !! Careful children's shoes may noticearcThe method does not have the last parameter. It is optional.counterclockwiseThe parameter istrueYou guess the axis of the day will become familiar to us? Ah ~ Touch your head... This parameter turns the radians counterclockwise, and the axis radians remain unchanged ~

Well, after talking so much about it, should we get started? directly go to the code.

Ring. prototype. drawRing = function (ctx) {var count = 0, that = this, times = 10, // draw blue arc startAngle = this ten times. startAngle, endAngle = startAngle; // draw background cirle this. draw (ctx); var handle = setInterval (function () {if (count = times) {clearInterval (handle);} // angle ctx. beginPath (); var anglePerSec = 2 * Math. PI * (that. percent/100)/times; // The radian ctx that slides at each interval. arc( 250,250, that. radius, startAngle, endAngle, false); // The Center Coordinate must be consistent with that of the cirle ctx. strokeStyle = that. fillStyle; ctx. lineCap = that. lineCap; ctx. stroke (); ctx. closePath (); startAngle + = anglePerSec-0.0028; // eliminate the calculation error between each painted ring to prevent gaps endAngle = startAngle + anglePerSec; count ++;}, 60 ); // The definition is drawn every 60 ms}

Yes, you just needRing.prototype.drawRingThe method is replaced with the above one.
Let's draw one by yourself ~