建立两个canvas标签，先绘制底层的浅灰色圆圈背景，再绘制上层的红色进度条。
.wxml的代码如下：
| 123456789 | 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最好使用。
| 12345678910111213141516171819202122232425262728 | 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代码如下：
| 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253 | //获取应用实例var app = getApp() var interval;var varName;var ctx = wx.createCanvasContext('canvasArcCir'); Page({
|
