手把手教你使用小程序创建画布时钟（实例）

onLoad: function(){	//将全局变量Index保存在that中，里面函数调用	var that = this	//获取系统信息	wx.getSystemInfo({		//获取系统信息成功，将系统窗口的宽高赋给页面的宽高		success: function(res) {			that.width = res.windowWidth			that.height = res.windowHeight		}	})},

onReady: function(){	//调用canvasApp函数	this.canvasClock()	//对canvasAPP函数循环调用	this.interval = setInterval(this.canvasClock,1000)},

//重置画布函数	function reSet(){		context.height = context.height;//每次清除画布，然后变化后的时间补上            context.translate(width/2, height/2);//设置坐标轴原点            context.save();//保存中点坐标1	}	//绘制中心圆和外面大圆	function circle(){		//外面大圆		context.setLineWidth(2);            context.beginPath();            context.arc(0, 0, width/2-30, 0, 2 * Math.PI,true);            context.closePath();            context.stroke();            //中心圆            context.beginPath();            context.arc(0, 0, 8, 0, 2 * Math.PI, true);            context.closePath();            context.stroke();	}	//绘制字体	function num(){		// var R = width/2-60;//设置文字距离时钟中心点距离		context.setFontSize(20)//设置字体样式            context.textBaseline = "middle";//字体上下居中，绘制时间            for(var i = 1; i <p>上面这部分相对来说是固定的，也就是不会动的圆，刻度，数字等。不过因为每次画都需要清除一次画布，所以这一部分也需要再循环里面。</p><pre class="brush:php;toolbar:false;">function move(){            var t = new Date();//获取当前时间            var h = t.getHours();//获取小时            h = h&gt;12?(h-12):h;//将24小时制转化为12小时制            var m = t.getMinutes();//获取分针            var s = t.getSeconds();//获取秒针            context.save();//再次保存2            context.setLineWidth(7);            //旋转角度=30度*（h+m/60+s/3600）            //分针旋转角度=6度*（m+s/60）            //秒针旋转角度=6度*s            context.beginPath();            //绘制时针            context.rotate((Math.PI/6)*(h+m/60+s/3600));            context.moveTo(-20,0);            context.lineTo(width/4.5-20,0);            context.stroke();            context.restore();//恢复到2,（最初未旋转状态）避免旋转叠加            context.save();//3            //画分针            context.setLineWidth(5);            context.beginPath();            context.rotate((Math.PI/30)*(m+s/60));            context.moveTo(-20,0);            context.lineTo(width/3.5-20,0);            context.stroke();            context.restore();//恢复到3，（最初未旋转状态）避免旋转叠加            context.save();            //绘制秒针            context.setLineWidth(2);            context.beginPath();            context.rotate((Math.PI/30)*s);            context.moveTo(-20,0);            context.lineTo(width/3-20,0);            context.stroke();        }