小程序利用畫布動態畫圓

wxml代碼

<view class='container'>
	<canvas style='width:300px;height:200px;' canvas-id='canvas'></canvas>
</view>

 js代碼

Page({
    data: {
        // 開始角度
        startAngle: -(1 / 2 * Math.PI),
        // 結束角度
        endAngle: 3 / 2 * Math.PI,
        // 偏移角度
        xAngle: Math.PI / 180
    },
    onLoad: function() {
        var that = this;
        var cxt_arc = wx.createContext();
        var endAngle = that.data.endAngle;
        var xAngle = that.data.xAngle;
        var templeAngle = that.data.startAngle;
        var rander = function() {
            if (templeAngle >= endAngle) {
                return;
            } else if (templeAngle + xAngle > endAngle) {
                templeAngle = endAngle;
            } else {
                templeAngle += xAngle
            }
            cxt_arc.beginPath();
            cxt_arc.setStrokeStyle('red')
            cxt_arc.arc(100, 50, 50, that.data.startAngle, templeAngle);
            cxt_arc.stroke();
            cxt_arc.closePath();
            wx.drawCanvas({
                canvasId: 'canvas',
                actions: cxt_arc.getActions()
            })
   
            requestAnimationFrame(rander);
        }
        rander()
    },
})

 對requestAnimationFrame的解釋

window.requestAnimFrame = (function(){ return window.requestAnimationFrame || window.webkitRequestAnimationFrame || 　window.mozRequestAnimationFrame || function( callback ){ window.setTimeout(callback, 1000 / 60); }; })(); 

canvas的arc參數
arc(圓的中心位置x坐標，圓的中心位置y坐標,圓的半徑，開始的角度，結束的角度，順時針還是逆時針[true是逆時針])
再放一張圓的角度圖，


這樣就完成了對一個圓的動態畫布的繪制