介绍 & lt; view 类=皐rap"比;
& lt;才能view 类=癱ircle-box"比;
,,,& lt; canvas 类=癱ircle",风格=翱矶?200 px;,身高:200 px;“, canvas-id=癱anvasArcCir"比;
,,,& lt;/canvas>
,,,& lt; canvas 类=癱ircle",风格=皕 - index:, 5;,宽度:200 px;,身高:200 px;“, canvas-id=癱anvasCircle"比;
,,,& lt;/canvas>
,,,& lt; view 类=癲raw_btn", bindtap=癲rawCircle"在开始动态绘制& lt;/view>
& lt;才能/view>
& lt;/view> page {
,,宽度:100%;
,,身高:100%;
,,背景颜色:# fff;
}
.circle-box {
,,text-align:中心;
,,margin-top: 10大众;
}
.circle {
位置:才能,绝对;
,,左:0;
,,右:0;
,保证金:大敌;汽车;
}
.draw_btn {
,,宽度:35大众;
位置:才能,绝对;
,,:33大众;
,,右:0;
,,左:0;
,保证金:大敌;汽车;
边境才能:1 px # 000,固体;
,,这个特性:5大众;
} //获取应用实例
var app =, getApp ()
var 区间;
var varName;
var ctx =, wx.createCanvasContext (& # 39; canvasArcCir& # 39;);
页面({
,,数据:{
,,},
,,drawCircle: function (), {
,,,clearInterval (varName);
,,,function drawArc (s), e), {
,,,,,ctx.setFillStyle(& # 39;白色# 39;);
,,,,,ctx.clearRect (0, 0, 200, 200);
,,,,,ctx.draw ();
,,,,,var x =, 100年,y =, 100年,radius =, 96;
,,,,,ctx.setLineWidth (5);
,,,,,ctx.setStrokeStyle (& # 39; # d81e06& # 39;);
,,,,,ctx.setLineCap(& # 39;轮# 39;);
,,,,,ctx.beginPath ();
,,,,,ctx.arc(半径,x,, y,,,,,,假);
,,,,,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 & lt;=, n), {
,,,,,,,endAngle =, step *, 2, *, Math.PI /, n +, 1.5, *, Math.PI;
,,,,,,,drawArc (endAngle startAngle也);
,,,,,,,一步+ +;
,,,,,},{else
,,,,,,,clearInterval (varName);
,,,,,}
,,,};
,,,varName =, setInterval(动画,animation_interval);
,,},
,,onReady: function (), {
,,,//创建并返回绘图上下文上下文对象。
,,,var cxt_arc =, wx.createCanvasContext (& # 39; canvasCircle& # 39;);
,,,cxt_arc.setLineWidth (6);
,,,cxt_arc.setStrokeStyle (& # 39; # eaeaea& # 39;);
,,,cxt_arc.setLineCap(& # 39;轮# 39;);
,,,cxt_arc.beginPath ();
,,,cxt_arc.arc (100,, 100,, 96,, 0,, 2, *, Math.PI,,假);
,,,cxt_arc.stroke ();
,,,cxt_arc.draw ();
,,},
onLoad才能:function (选项),{
,,}
null
这篇文章将为大家详细讲解有关小程序开发中实时圆形进度条的示例分析,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
最近为了做一个录制按钮,研究了下小程序的实时圆形进度条实现
废话不多说,先上一张效果图!
初始状态
点击中间按钮开始绘制
绘制过程
绘制结束
实现思路
建立两个帆布标签,先绘制底层的浅灰色圆圈背景,再绘制上层的红色进度条。
WXML代码
wxs代码
特别注意:底层的帆布最好使用
z - index: 5;放置于底层
