Shulou(Shulou.com)06/03 Report--

This article mainly shows you the "H5 canvas how to draw the circle percentage progress", the content is easy to understand, well-organized, hope to help you solve your doubts, the following let the editor lead you to study and learn "H5 canvas how to draw the circle percentage progress" this article.

1. Effect picture

two。 Principle

The first step is to draw a custom color of the whole circle, and the second part is to draw an inner circle whose radius is smaller than that of the outer circle.

The last step is to draw the third circle as a percentage, with a custom color.

To achieve the effect of the third step of dynamic drawing, just add the function of a timer to draw a distance at regular intervals and set a threshold

Empty the timer when it is worth more than the valve, and this threshold is actually the percentage value to be displayed. Draw 0.01 at a time.

Note: when drawing in the timer, draw the inner circle in the second step, and the blank circle is also drawn in the timer.

3. Knowledge point

Draw formula: arc (x, y, radius, startRad, endRad, anticlockwise)

On the canvas canvas, draw an arc on a circle with a radius of radius centered at the coordinate point (XMagol y). The starting arc of this arc is startRad and the ending Radian is endRad. The radians here are calculated at the angle of clockwise rotation based on the positive direction of the x-axis (03:00 clock). Anticlockwise indicates whether to start drawing counterclockwise or clockwise, true for counterclockwise, and false for clockwise. The anticlockwise parameter is optional and defaults to false, that is, clockwise.

4.js source code

Function circleProgress (value,average) {var canvas = document.getElementById ("yuan"); var context = canvas.getContext ('2d') Var _ this = $(canvas), value= Number (value), / / current percentage, numeric average = Number (average), / / average percentage color = "", / / progress bar, text style maxpercent = 100 this.width stroke / maximum percentage, you can set c_width = _ this.width (), / / canvas, width c_height = _ this.height () / / canvas, height / / set current display color if (value== maxpercent) {color= "# 29c9ad";} else if (value > average) {color= "# 27b5ff";} else {color= "# ff6100";} / empty canvas context.clearRect (0,0, c_width, c_height); / / draw initial circle context.beginPath () / move the start point to the canvas center context.moveTo (c_width/2, c_height/2); / / draw a full circle context.arc (c_width/2, c_height/2, c_height/2, 0, Math.PI * 2, false) with the center point (c_width/2, c_height/2), radius c_height/2, starting point 0, and ending point Math.PI * 2; context.closePath () Context.fillStyle ='# ddd'; / / fill color context.fill (); / draw inner circle context.beginPath (); context.strokeStyle = color; context.lineCap = 'square'; context.closePath (); context.fill (); context.lineWidth = 10.0 function draw / line width of drawing inner circle function draw (cur) {/ / drawing inner blank context.beginPath () Context.moveTo (24,24); context.arc (c_width/2, c_height/2, c_height/2-10,0, Math.PI * 2, true); context.closePath (); context.fillStyle = 'rgba (255pyrone)'; / / fill the inner color context.fill (); / / draw the inner circle context.beginPath () / / draw a center point (c_width/2, c_height/2) with a radius of c_height/2-5 that does not overlap with the outer circle, / / starting point-(Math.PI/2) The whole circle cur with a termination point of ((Math.PI*2) * cur)-Math.PI/2 is the distance context.arc (c_width/2, c_height/2, c_height/2-5,-(Math.PI/2), ((Math.PI*2) * cur)-Math.PI/2, false) Context.stroke (); / / write in the middle context.font = "bold 18pt Arial"; / / font size, style context.fillStyle = color; / / color context.textAlign = 'center'; / / position context.textBaseline =' middle'; context.moveTo (c_width/2, c_height/2) / / text filling position context.fillText (value+ "%", c_width/2, c_height/2-20); context.fillText ("accuracy", c_width/2, c_height/2+20);} / / call timer to achieve dynamic effect var timer=null,n=0 Function loadCanvas (nowT) {timer= setInterval (function () {if (n > nowT) {clearInterval (timer);} else {draw (n); n + = 0.01;}}, 15);} loadCanvas (value/100); timer=null;}

Finally, you need to call the circleProgress method and put the corresponding parameters in. The blogger wrote that it was triggered by clicking a button.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.