微信小程序——自定义圆形进度条
2016-12-28 17:12
204 查看
无图无真相,先上图:
![](http://img.blog.csdn.net/20161228170636285?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvd2wxNzY5MTI3Mjg1/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
实现思路,先绘制底层的灰色圆圈背景,再绘制上层的蓝色进度条。
代码实现:
JS代码:
Page({
data: {},
onLoad: function (options) {
// 页面初始化 options为页面跳转所带来的参数
},
onReady: function () {
// 页面渲染完成
var cxt_arc = wx.createCanvasContext('canvasArc');//创建并返回绘图上下文context对象。
cxt_arc.setLineWidth(6);
cxt_arc.setStrokeStyle('#d2d2d2');
cxt_arc.setLineCap('round')
cxt_arc.beginPath();//开始一个新的路径
cxt_arc.arc(106, 106, 100, 0, 2*Math.PI, false);//设置一个原点(106,106),半径为100的圆的路径到当前路径
cxt_arc.stroke();//对当前路径进行描边
cxt_arc.setLineWidth(6);
cxt_arc.setStrokeStyle('#3ea6ff');
cxt_arc.setLineCap('round')
cxt_arc.beginPath();//开始一个新的路径
cxt_arc.arc(106, 106, 100, -Math.PI * 1 / 2, Math.PI*6/5, false);
cxt_arc.stroke();//对当前路径进行描边
cxt_arc.draw();
},
onShow: function () {
// 页面显示
},
onHide: function () {
// 页面隐藏
},
onUnload: function () {
// 页面关闭
}
})
页面布局:
<view class="wrap">
<view class="top">
<canvas class="cir" style="width:212px; height:212px;" canvas-id="canvasArc">
</canvas>
<view class="cc">中间</view>
</view>
</view>
CSS样式:
.cir{
display: inline-block;
margin-top: 20rpx;
}
.top{
text-align: center
}
.cc{
margin-top: -120px;
}
实现思路,先绘制底层的灰色圆圈背景,再绘制上层的蓝色进度条。
代码实现:
JS代码:
Page({
data: {},
onLoad: function (options) {
// 页面初始化 options为页面跳转所带来的参数
},
onReady: function () {
// 页面渲染完成
var cxt_arc = wx.createCanvasContext('canvasArc');//创建并返回绘图上下文context对象。
cxt_arc.setLineWidth(6);
cxt_arc.setStrokeStyle('#d2d2d2');
cxt_arc.setLineCap('round')
cxt_arc.beginPath();//开始一个新的路径
cxt_arc.arc(106, 106, 100, 0, 2*Math.PI, false);//设置一个原点(106,106),半径为100的圆的路径到当前路径
cxt_arc.stroke();//对当前路径进行描边
cxt_arc.setLineWidth(6);
cxt_arc.setStrokeStyle('#3ea6ff');
cxt_arc.setLineCap('round')
cxt_arc.beginPath();//开始一个新的路径
cxt_arc.arc(106, 106, 100, -Math.PI * 1 / 2, Math.PI*6/5, false);
cxt_arc.stroke();//对当前路径进行描边
cxt_arc.draw();
},
onShow: function () {
// 页面显示
},
onHide: function () {
// 页面隐藏
},
onUnload: function () {
// 页面关闭
}
})
页面布局:
<view class="wrap">
<view class="top">
<canvas class="cir" style="width:212px; height:212px;" canvas-id="canvasArc">
</canvas>
<view class="cc">中间</view>
</view>
</view>
CSS样式:
.cir{
display: inline-block;
margin-top: 20rpx;
}
.top{
text-align: center
}
.cc{
margin-top: -120px;
}
相关文章推荐
- jquery彩色投票进度条简单实例演示
- jquery mobile 实现自定义confirm确认框效果的简单实例
- 使用TypeScript开发微信小程序的方法
- C#实现自定义双击事件
- WinForm实现自定义右下角提示效果的方法
- android 进度条组件ProgressBar
- Android 自定义View的构造函数详细介绍
- 一款超酷的Android自定义加载控件
- jQuery多文件异步上传带进度条实例代码
- 微信小程序 闭包写法详细介绍
- Android自定义View实现照片裁剪框与照片裁剪功能
- sql server 自定义分割月功能详解及实现代码
- 初学C++之自定义类型名简化详解
- MFC自定义消息的实现方法
- C#实现ProperTyGrid自定义属性的方法
- jquery模拟进度条实现方法
- php自定义错误处理用法实例
- ThinkPHP中自定义目录结构的设置方法
- PHP设置进度条的方法