A tutorial on how to implement a custom circular progress bar for a micro-letter applet

The micro-letter applet customizes the circular progress bar as follows:

No picture, no truth, first figure:

To achieve the idea, first draw the bottom of the gray circle background, and then draw the top blue progress bar.

Code implementation:

JS Code:

Page ({ Data: {}, Onload:function (options) { Page initialization options The parameters that are brought by the page jump }, Onready:function () { Page Render Complete Varcxt_arc = Wx.createcanvascontext (' Canvasarc ');//Create and return the drawing context contexts object. Cxt_arc.setlinewidth (6); Cxt_arc.setstrokestyle (' #d2d2d2 '); Cxt_arc.setlinecap (' round ') Cxt_arc.beginpath ()//Start a new path Cxt_arc.arc (0, 2*math.pi,false); Set a origin (106,106), the path of a circle with a radius of 100 to the current path Cxt_arc.stroke ()//to stroke the current path Cxt_arc.setlinewidth (6); Cxt_arc.setstrokestyle (' #3ea6ff '); Cxt_arc.setlinecap (' round ') Cxt_arc.beginpath ()//Start a new path Cxt_arc.arc (-math.pi * 1/2, Math.pi*6/5,false); Cxt_arc.stroke ()//to stroke the current path Cxt_arc.draw (); }, Onshow:function () { Page display }, Onhide:function () { Page Hide }, Onunload:function () { Page off } })

Page layout:

<viewclass= "Wrap" > <viewclass= "Top" > <canvasclass= "Cir" style= "width:212px; height:212px; " Canvas-id= "Canvasarc" > </canvas> <viewclass= "CC" > Center </view> </view> </view>

CSS style:

. cir{ Display:inline-block; MARGIN-TOP:20RPX; } . top{ Text-align:center } . cc{ margin-top:-120px; }