圆形进度条的音乐播放，微信小程序js怎么写？

建立两个canvas标签，先绘制底层的浅灰色圆圈背景，再绘制上层的红色进度条。

WXML代码

开始动态绘制

WXSS代码

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

z-index:-99；放置于底层

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 intervalvar varNamevar 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

https://developers.weixin.qq.com/miniprogram/dev/component/canvas.html

Canvas2D接口（type="2d"）,支持同层渲染的一个圆环进度条。（wx.createCanvasContext已废弃）

https://gitee.com/susuhhhhhh/components

https://gitee.com/susuhhhhhh/wxmini_demo

首先要将微信升级到最新的6.6.1版本。具体更新微信版本的 *** 作程序很简单，对于小白来说可以参考我上一篇经验，也可以参考其它微信升级方法。

2/6

用快捷方式打开小程序，在微信主页面下拉，出现小程序任务栏后，点击要进入的小程序。

小程序的流程丨3分钟制作丨微盟小程序

关注小程序的人也在看

微盟广告

3/6

在小程序右上方有“...”按钮和“圆点”按钮。首先说“...”按钮的使用。点击“...”后，会出现“转发”、“添加到桌面”以及打开的小程序介绍。

4/6

点击一下“圆点”按钮后，小程序会直接闪退，离开当前小程序，回到主页面小程序任务栏。

5/6

长按“圆点”按钮，就会出现多个任务切换界面，可以快捷的打开最近使用过的小程序。

6/6

小程序的升级使我们 *** 作更加简单快捷，以后肯定会陆续开放自定义导航的能力，让我们共同期待。今天分享的小程序快捷按钮使用方法，小伙伴们赶紧试一试吧！

---