This article has shared the specific code of the custom circular progress bar of the mini program for your reference. The specific content is as follows
:
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;
}
:
<view class="wrap"> <view class="circle-box"> <canvas class="circle" style="z-index: -99; width:200px; height:200px;" canvas-> </canvas> <canvas class="circle" style="width:200px; height:200px;" canvas-> </canvas> <view class="draw_btn"> <view>80point</view> <view>(满point100point)</view> </view> </view> </view>
:
// pages/circle/
//Get the application exampleconst app = getApp()
var ctx = ('canvasArcCir');
Page({
/**
* Initial data of the page
*/
data: {
},
drawCircle: function() {
function drawArc(s, e) {
('white');
(0, 0, 200, 200);
();
var x = 100,
y = 100,
radius = 96;
(5);
('#d81e06');
('round');
();
//The x,y coordinates of the center of the circle, radius s: the starting radian, unit radian (in the direction of 3 o'clock) e: the end radian,: false is the direction of the radian counterclockwise? (x, y, radius, s, e, false);
()
()
}
var step = 70,
startAngle = 1.5 * ,
endAngle = 0,
n = 100,
endAngle = step * 2 * / n + 1.5 * ;
drawArc(startAngle, endAngle);
},
/**
* Lifecycle function-listen to page load
*/
onLoad: function(options) {
//Call the method of drawing circles ()
},
/**
* Lifecycle function--listening page rendering is completed for the first time
*/
onReady: function() {
//Create and return the drawing context context object. var cxt_arc = ('canvasCircle');
cxt_arc.setLineWidth(6);
cxt_arc.setStrokeStyle('#eaeaea');
cxt_arc.setLineCap('round');
cxt_arc.beginPath();
cxt_arc.arc(100, 100, 96, 0, 2 * , false);
cxt_arc.stroke();
cxt_arc.draw();
},
})
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.