Shulou(Shulou.com)05/31 Report--

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)

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.