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
使用该圆形进度条插件需要引入jQuery和jquery.classycolor.min.js和jquery.classycolor.min.css文件。<link rel="stylesheet" type="text/css" href="css/jquery.classycolor.min.css" />
<script src='js/jquery.min.js'></script>
<script src='js/jquery.classycolor.min.js'></script>
html5+javascript 实现的圆形进度条，应该符合你要求
源代码 ： http://blog.csdn.net/tangdou5682/article/details/52778766
