這篇文章手把手帶大家使用微信小程式創建一個畫布時鐘，希望對大家有幫助！
今天做的是一個微信小程式畫布時鐘，也就是傳統的數位時鐘。 【相關學習推薦：小程式開發教學】
#直接上圖，效果如圖。
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();
}最後這一步是最難的，難點在於計算時針，分針，秒針之前的關係。不過這些都是數學公式，只要把角度都算好了，剩下的東西就好辦了。
原文網址：https://juejin.cn/post/7008355969600061447
作者：詩一樣的程式碼
#更多程式相關知識，請造訪：程式設計影片！ ！
以上是手把手教你使用小程式創建畫布時鐘（實例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
