How to realize real-time circular progress bar by WeChat Mini Programs
This article mainly explains "how WeChat Mini Programs realizes the real-time circular progress bar". The content of the explanation in the article is simple and clear, and it is easy to learn and understand. let's go deep into the editor's train of thought. Let's study and learn how WeChat Mini Programs realizes the real-time circular progress bar.
The effect picture is as follows
Initial state
Click the middle button to start drawing
Drawing process
End of drawing
Realization idea
Create two canvas tags, first draw the light gray circle background at the bottom, and then draw the red progress bar at the top.
WXML code
Start dynamic drawing
WXSS code
Special note: the underlying canvas is best used
Put it at the bottom of the floor
Page {width: 100%; height: 100%; background-color: # fff;}. Circle-box {text-align: center; margin-top: 10vW;}. Circle {position: absolute; left: 0; right: 0; margin: auto;}. Draw_btn {width: 35vW; position: absolute; top: 33vW; right: 0; left: 0; margin: auto; border: 1px # 000 solid; border-radius: 5vW;}
JS code
/ / get application instance var app = getApp () var interval;var varName;var ctx = wx.createCanvasContext ('canvasArcCir'); Page ({data: {}, drawCircle: function () {clearInterval (varName); function drawArc (s, e) {ctx.setFillStyle (' white'); ctx.clearRect (0,0,200,200); ctx.draw (); var x = 100,100, radius = 96; ctx.setLineWidth (5); ctx.setStrokeStyle ('# d81e06'); ctx.setLineCap ('round') Ctx.beginPath (); ctx.arc (x, y, radius, s, e, false); ctx.stroke () ctx.draw ()} var step = 1, startAngle = 1.5 * Math.PI, endAngle = 0; var animation_interval = 1000, n = 60; var animation = function () {if (step)
