// 獲取應(yīng)用實(shí)例
Page({
    data:{
        width:0,
        height:0
    },
    //onLoad生命周期函數(shù)，監(jiān)聽頁(yè)面加載
    onLoad: function(){
        //將全局變量Index保存在that中，里面函數(shù)調(diào)用
        var that = this
        //獲取系統(tǒng)信息
        wx.getSystemInfo({
            //獲取系統(tǒng)信息成功，將系統(tǒng)窗口的寬高賦給頁(yè)面的寬高
            success: function(res) {
                that.width = res.windowWidth
                that.height = res.windowHeight
            }
        })
    },
    //onReady生命周期函數(shù)，監(jiān)聽頁(yè)面初次渲染完成
    onReady: function(){
        //調(diào)用canvasClock函數(shù)
        this.canvasClock()
        //對(duì)canvasClock函數(shù)循環(huán)調(diào)用
        this.interval = setInterval(this.canvasClock,1000)
    },
    canvasClock: function(){
        var context = wx.createContext()//創(chuàng)建并返回繪圖上下文（獲取畫筆）
        //設(shè)置寬高
        var width = this.width
        var height = this.height
        var R = width/2-55;//設(shè)置文字距離時(shí)鐘中心點(diǎn)距離
        //重置畫布函數(shù)
        function reSet(){
            context.height = context.height;//每次清除畫布，然后變化后的時(shí)間補(bǔ)上
            context.translate(width/2, height/2);//設(shè)置坐標(biāo)軸原點(diǎn)
            context.save();//保存中點(diǎn)坐標(biāo)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;//設(shè)置文字距離時(shí)鐘中心點(diǎn)距離
            context.setFontSize(20)//設(shè)置字體樣式
            context.textBaseline = "middle";//字體上下居中，繪制時(shí)間
            for(var i = 1; i < 13; i++) {
                //利用三角函數(shù)計(jì)算字體坐標(biāo)表達(dá)式
                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){//調(diào)整數(shù)字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);//時(shí)間從3點(diǎn)開始，倒轉(zhuǎn)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();
            }
         }
         //指針運(yùn)動(dòng)函數(shù)
        function move(){
            var t = new Date();//獲取當(dāng)前時(shí)間
            var h = t.getHours();//獲取小時(shí)
            h = h>12?(h-12):h;//將24小時(shí)制轉(zhuǎn)化為12小時(shí)制
            var m = t.getMinutes();//獲取分針
            var s = t.getSeconds();//獲取秒針
            context.save();//再次保存2
            context.setLineWidth(7);
            //旋轉(zhuǎn)角度=30度*（h+m/60+s/3600）
            //分針旋轉(zhuǎn)角度=6度*（m+s/60）
            //秒針旋轉(zhuǎn)角度=6度*s
            context.beginPath();
            //繪制時(shí)針
            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();//恢復(fù)到2,（最初未旋轉(zhuǎn)狀態(tài)）避免旋轉(zhuǎn)疊加
            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();//恢復(fù)到3，（最初未旋轉(zhuǎn)狀態(tài)）避免旋轉(zhuǎn)疊加
            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();
        }
        //調(diào)用
        function drawClock(){
            reSet();
            circle();
            num();
            smallGrid();
            bigGrid();
            move();
        }
        drawClock()//調(diào)用運(yùn)動(dòng)函數(shù)
        // 調(diào)用 wx.drawCanvas，通過 canvasId 指定在哪張畫布上繪制，通過 actions 指定繪制行為
        wx.drawCanvas({
            canvasId:'myCanvas',
            actions: context.getActions()
        })
    },
    //頁(yè)面卸載，清除畫布繪制計(jì)時(shí)器
    onUnload:function(){
        clearInterval(this.interval)
    }
})

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