鍍金池/ 問答/HTML5  HTML/ 小程序 canvas 環(huán)形進度條 怎么添加畫圖動畫效果

小程序 canvas 環(huán)形進度條 怎么添加畫圖動畫效果

Page({
  data: {
  },
onReady: function () {
 
    // 頁面渲染完成 
    var cxt_arc = wx.createCanvasContext('canvas1');//創(chuàng)建并返回繪圖上下文context對象。 

    cxt_arc.setLineWidth(6);
    cxt_arc.setStrokeStyle('#80868a');
    cxt_arc.setLineCap('round')
    cxt_arc.beginPath();//開始一個新的路徑 
    cxt_arc.arc(125, 125, 120, Math.PI * 0.8, 2.2 * Math.PI, false);//設(shè)置一個原點(125,125)，半徑為120的圓的路徑到當(dāng)前路徑 
    cxt_arc.stroke()//對當(dāng)前路徑進行描邊 


    cxt_arc.draw();

  },
})
回答
編輯回答
神經(jīng)質(zhì)

畫第二個圓的時候 每次調(diào)整一下角度

var aa=Math.PI*2/100
var n=0
ctx.arc(c.width/2,c.height/2,100,-Math.PI/2,n*aa-Math.PI/2,false)
n+=0.1

原理就是這樣

2018年6月8日 21:42