小程序利用画布动态画圆

wxml代码

<view class='container'>
	<canvas style='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是逆时针])
再放一张圆的角度图，


这样就完成了对一个圆的动态画布的绘制