How to implement real-time circular progress bar in WeChat applet

This article mainly introduces you to the method of using WeChat applet to realize real-time circular progress bar. The article gives detailed sample code. I believe it has certain reference value for everyone. Friends who need it can read it together below. Take a look.

Preface

Recently, in order to make a recording button at work, I studied the implementation of the real-time circular progress bar of the small program. Here is the article This article will give you a detailed introduction to the implementation method and examples. Without further ado, let’s take a look at the renderings first.

The rendering is as follows

Initial state

Click the middle button to start drawing

Drawing process

End of drawing

Implementation ideas

Create two canvas tags, first draw the bottom light gray circle background, and then draw the upper red progress bar.

WXML code

<view class="wrap">
 <view class="circle-box">
 <canvas class="circle" style="width:200px; height:200px;" canvas-id="canvasArcCir">
 </canvas>
 <canvas class="circle" style="z-index: -5; width:200px; height:200px;" canvas-id="canvasCircle">
 </canvas>
 <view class="draw_btn" bindtap="drawCircle">开始动态绘制</view>
 </view>
</view>

##WXSS code

Special Note:It is best to use

z-index:-5 for the underlying canvas; place it on the bottom layer

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

//获取应用实例
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, y = 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 <= n) {
 endAngle = step * 2 * Math.PI / n + 1.5 * Math.PI;
 drawArc(startAngle, endAngle);
 step++;
 } else {
 clearInterval(varName);
 }
 };
 varName = setInterval(animation, animation_interval);
 },
 onReady: function () {
 //创建并返回绘图上下文context对象。
 var cxt_arc = wx.createCanvasContext(&#39;canvasCircle&#39;);
 cxt_arc.setLineWidth(6);
 cxt_arc.setStrokeStyle(&#39;#eaeaea&#39;);
 cxt_arc.setLineCap(&#39;round&#39;);
 cxt_arc.beginPath();
 cxt_arc.arc(100, 100, 96, 0, 2 * Math.PI, false);
 cxt_arc.stroke();
 cxt_arc.draw();
 },
 onLoad: function (options) {

 }
})

Points to note

1. For mini program canvas drawing, please watch the WeChat mini program official document drawing

2. The path to start drawing can be based on the variable startAngle in the JS code to choose where to start drawing

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

WeChat Mini Program Implementation of monitoring gesture sliding to switch pages

WeChat applet Picture proportional scaling

WeChat Mini Program Development Running WeChat Mini Program

The above is the detailed content of How to implement real-time circular progress bar in WeChat applet. For more information, please follow other related articles on the PHP Chinese website!