本文实例为大家分享了小程序自定义圆形进度条的具体代码,供大家参考,具体内容如下
circle.wxss:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
page {
width : 100% ;
height : 100% ;
background-color : #fff ;
}
.circle-box {
text-align : center ;
margin-top : 10 vw;
}
. circle {
position : absolute ;
left : 0 ;
right : 0 ;
margin : auto ;
}
.draw_btn {
width : 35 vw;
position : absolute ;
top : 33 vw;
right : 0 ;
left : 0 ;
margin : auto ;
border : 1px #000 solid ;
border-radius: 5 vw;
}
|
circle.wxml:
1
2
3
4
5
6
7
8
9
10
11
12
|
< view class = "wrap" >
< view class = "circle-box" >
< canvas class = "circle" style = "z-index: -99; width:200px; height:200px;" canvas-id = "canvasCircle" >
</ canvas >
< canvas class = "circle" style = "width:200px; height:200px;" canvas-id = "canvasArcCir" >
</ canvas >
< view class = "draw_btn" >
< view >80分</ view >
< view >(满分100分)</ view >
</ view >
</ view >
</ view >
|
circle.js:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
|
// pages/circle/circle.js
//获取应用实例
const app = getApp()
var ctx = wx.createCanvasContext( 'canvasArcCir' );
Page({
/**
* 页面的初始数据
*/
data: {
},
drawCircle: function () {
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();
//圆心的 x,y坐标,radius半径 s:起始弧度,单位弧度(在3点钟方向) e:终止弧度,:false弧度的方向是否是逆时针
ctx.arc(x, y, radius, s, e, false );
ctx.stroke()
ctx.draw()
}
var step = 70,
startAngle = 1.5 * Math.PI,
endAngle = 0,
n = 100,
endAngle = step * 2 * Math.PI / n + 1.5 * Math.PI;
drawArc(startAngle, endAngle);
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
//调用画圆的方法
this .drawCircle()
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
//创建并返回绘图上下文context对象。
var cxt_arc = wx.createCanvasContext( 'canvasCircle' );
cxt_arc.setLineWidth(6);
cxt_arc.setStrokeStyle( '#eaeaea' );
cxt_arc.setLineCap( 'round' );
cxt_arc.beginPath();
cxt_arc.arc(100, 100, 96, 0, 2 * Math.PI, false );
cxt_arc.stroke();
cxt_arc.draw();
},
})
|
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持服务器之家。
原文链接:https://blog.csdn.net/wjswangjinsheng/article/details/102466828