如何使用小程序創建畫布時鐘

這篇文章將為大家詳細講解有關如何使用小程序創建畫布時鐘，文章內容質量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關知識有一定的了解。

今天做的是一個微信小程序畫布時鐘，也就是傳統的數字時鐘。【

直接上圖，效果如圖。

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)
	},

onReady生命周期函數，監聽頁面初次渲染完成。然后再加上定時器，沒一秒執行一次this.canvasClock函數。

//重置畫布函數
		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();
        }

最后這一步是最難的，難點在于計算時針，分針，秒針之前的關系。不過這些都是數學公式，只要把角度都計算好了，剩下的東西就好辦了。

關于如何使用小程序創建畫布時鐘就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。