在之前的文章裡http://blog.csdn.net/weixin_36185028/article/details/53786993分享了用Html5畫布繪製了mac時鐘，微信小程式官方元件也提供了畫布功能，下面分享一下如何建立微信小程式畫布時鐘。

總體思路是對pages中的一個小程式頁面構建畫布時鐘邏輯程式，通過app.json公共設定來配置入口。

首先來看一下構建這樣一個小程式所需要的目錄結構

從目錄結構就可以看出來這個程式是簡單的單層頁面，畫布渲染在pages下面的index頁面上。

其中對程式有實際驅動作用的程式碼分別在index.js，index.wxml，index.wxss和app.json這幾個檔案中

Index.js檔案裡面存放著程式的邏輯層資料，是程式的核心。

1）考慮到適應不同的手機大小，定義了兩個變數width和height，當頁面載入時（onLoad）獲取系統視窗的值作為index頁面的大小；

2）頁面初次渲染後給index新增時鐘函式canvasClock（），並設定定時器，每一秒重新整理一次畫布，呈現出時鐘運動的效果

3）在時鐘函式canvasClock（）中進行繪製時鐘頁面所需的元素以其其運動函式，並對其進行呼叫drawClock()，通過呼叫小程式wx.drawCanvas方法來指定index為繪製頁面和繪製行為

4）當程式退出時，清除計時器

程式碼如下：

// 獲取應用例項
Page({
	data:{
		width:0,
		height:0
	},
	//onLoad生命週期函式，監聽頁面載入
	onLoad: function(){
		//將全域性變數Index儲存在that中，裡面函式呼叫
		var that = this
		//獲取系統資訊
		wx.getSystemInfo({
			//獲取系統資訊成功，將系統視窗的寬高賦給頁面的寬高
			success: function(res) {
				that.width = res.windowWidth
				that.height = res.windowHeight
			}
		})
	},
	//onReady生命週期函式，監聽頁面初次渲染完成
	onReady: function(){
		//呼叫canvasClock函式
		this.canvasClock()
		//對canvasClock函式迴圈呼叫
		this.interval = setInterval(this.canvasClock,1000)
	},
	canvasClock: function(){
		var context = wx.createContext()//建立並返回繪圖上下文（獲取畫筆）
		//設定寬高
		var width = this.width
		var height = this.height
		var R = width/2-55;//設定文字距離時鐘中心點距離
		//重置畫布函式
		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 < 13; i++) {
                //利用三角函式計算字型座標表示式
                var x = R * Math.cos(i * Math.PI / 6 - Math.PI / 2);
                var y = R * Math.sin(i * Math.PI / 6 - Math.PI / 2);
                if(i==11||i==12){//調整數字11和12的位置
                    context.fillText(i, x-12, y+9);
                }else {
                    context.fillText(i, x-6, y+9);
                }
            }
		}
		//繪製小格
		function smallGrid(){
				context.setLineWidth(1);
                context.rotate(-Math.PI/2);//時間從3點開始，倒轉90度
                for(var i = 0; i < 60; i++) {
                    context.beginPath();
                    context.rotate(Math.PI / 30);
                    context.moveTo(width/2-30, 0);
                    context.lineTo(width/2-40, 0);
                    context.stroke();
                }
         }
         //繪製大格
         function bigGrid(){
         	context.setLineWidth(5);
            for(var i = 0; i < 12; i++) {
                context.beginPath();
                context.rotate(Math.PI / 6);
                context.moveTo(width/2-30, 0);
                context.lineTo(width/2-45, 0);
                context.stroke();
            }
         }
         //指標運動函式
        function move(){
            var t = new Date();//獲取當前時間
            var h = t.getHours();//獲取小時
            h = h>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();
        }
        //呼叫
		function drawClock(){
			reSet();
			circle();
			num();
			smallGrid();
			bigGrid();
			move();
		}
		drawClock()//呼叫運動函式
		// 呼叫 wx.drawCanvas，通過 canvasId 指定在哪張畫布上繪製，通過 actions 指定繪製行為
		wx.drawCanvas({
			canvasId:'myCanvas',
			actions: context.getActions()
		})
	},
	//頁面解除安裝，清除畫布繪製計時器
	onUnload:function(){
		clearInterval(this.interval)
	}
})
 

index.wxml中存放著canvas標籤，並通過canvas-id和class指定了元件識別符號和樣式選擇器

<canvas canvas-id="myCanvas" class="canvas"></canvas>

index.wxss設定畫布樣式

.canvas{
	width: 100%;
	height: 100%;
	position: fixed;
}

app.json檔案設定了頁面路徑和視窗表現

{
	"pages": [
		"pages/index"
	],
  "window": {
    "navigationBarTextStyle": "light",
    "navigationBarTitleText": "畫布時鐘",
    "navigationBarBackgroundColor": "#000",
    "backgroundColor": "#fbf9fe"
  }
}
 

這樣，整個微信小程式畫布時鐘就簡單的建立完成，看一下效果

guthub下載地址：https://github.com/RidingACodeToStray/weCanvasClock.git