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
昨天逛网页时看到有用css与js实现环形进度条的（那位博主在面试时被要求当场写出环形进度条π_π），然后就想尝试下写出来（感觉好尴尬），说实话春节后遗症真可怕 haha~
看了网上的 三种方法 实现方式如下：
两个clip过的半圆，边框设置颜色，左侧的用来旋转，右侧的固定不动（width：0px），当进度到达50%时， 右侧的半圆显示出来（同时左半圆和右半圆的父元素div覆盖最外层的div），左侧的半圆继续旋转 。
可能我没说清楚，原文链接： http://blog.csdn.net/angeljsl/article/details/51208960
使用SVGstroke-dasharray寥寥数行实现圆环loading进度效果，原文链接： http://www.zhangxinxu.com/wordpress/?p=4889
利用path元素，使用path指令绘制扇形，原文链接： http://www.tuicool.com/articles/e2UzuaQ
常用的path指令:
两个介绍 SVG比较详细的网址
http://www.w3cplus.com/css3/using-making-sense-of-clip-path.html
http://www.mb5u.com/HTML5/html5_96413.html
核心就是使用-webkit-clip-path:polygon()切割div，border-radius:50%画出圆弧
我想到三种实现方法：1、CSS字体支持反色效果。你可以用css实现。
2、CSS得遮罩效果，做两层把下面遮住，一点点露出来。
3、用canvas绘图。
