全网整合营销服务商

营销型网站+SEO优化+关键词快排=一站式服务

免费咨询热线:15959292472

[莆田seo公司]小程序开发之实时圆形进度条详解

  


 

  

最近为了做一个录制按钮,研究了下小程序的实时圆形进度条实现

 

  废话不多说,先上一张效果图!

  

 

  初始状态

  

  

 

  点击中间按钮开始绘制

  

 

  绘制过程

  

 

  绘制结束

  

实现思路

 

  建立两个canvas标签,四平市小程序制作公司先绘制底层的浅灰色圆圈背景★■▲,再绘制上层的红色进度条。

  

WXML代码

<•▪;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代码

 

  特别注意:底层的canvas最好使用

  z-index:-5○○●; 放置于底层

  

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代码

//获取应用实例
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('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();
 }▪●•,
 onLoad◇☆: function (options) {
 }
})

注意的要点

 

  1、关于小程序canvas绘制,请观看 微信小程序官方文档绘制

  2、[莆田seo公司]开始绘制的路径可以根据 JS代码中的变量startAngle 来选择从哪里开始绘制

  

 

  最后有什么问题可以留言=○▼,大家一起讨论共同进步~~

  【相关推荐】

  1. 微信小程序之制作自定义圆形进度条

  2. Canvas实现圆形进度条并显示数字百分比

  3◆-□. 微信开发之微信支付

  4. 详解微信小程序支付功能开发错误总结

  5. 利用css3实现圆形进度条

  6. 利用jQuery实现漂亮的圆形进度条倒计时插件_jquery

  以上就是小程序开发之实时圆形进度条详解的详细内容△▼,吉安市小程序开发哪家好更多请关注久澳传媒编程栏目其它相关文章!24 2020.10 [吉林seo公司推荐久澳]微信公众号和小程序有什么不同 微信小程序和公众号的不同点在于▼◇: 一、濮阳市小程序开发哪家好进入的方式不一样 微信公众号扫一扫需要关注,关注后订阅号出现在公众号里面△○◁,而服务号出现在好友里面,小程序扫一扫后直接

[莆田seo公司]小程序开发之实时圆形进度条详解

您的项目需求

*请认真填写需求信息,我们会在24小时内与您取得联系。