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

发布网友发布时间：2022-04-24 08:01

共1个回答

热心网友时间：2022-04-20 03:01

建立两个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 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