This article will guide you step by step to create a canvas clock using the WeChat applet. I hope it will be helpful to you!

What I am making today is a WeChat applet canvas clock, which is a traditional digital clock. [Related learning recommendations: 小program development tutorial]

Directly above the picture, the effect is as shown.

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

The first thing is to read the width and height of the screen. This is to calculate the position of the clock later so that it can be placed in the center.

onReady: function(){
		//調(diào)用canvasApp函數(shù)
		this.canvasClock()
		//對(duì)canvasAPP函數(shù)循環(huán)調(diào)用
		this.interval = setInterval(this.canvasClock,1000)
	},

onReady life cycle function, monitors the completion of the initial rendering of the page. Then add a timer to execute this.canvasClock function every second.

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

The above part is relatively fixed, that is, the circles, scales, numbers, etc. that will not move. However, because the canvas needs to be cleared every time you draw, this part also needs to be recycled.

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();
        }

The last step is the most difficult. The difficulty lies in calculating the relationship between the hour hand, minute hand, and second hand. But these are all mathematical formulas. As long as the angles are calculated, the rest will be easy to handle.

Original address: https://juejin.cn/post/7008355969600061447

Author: Code Like Poetry

More programming related knowledge, Please visit: programming video! !

The above is the detailed content of Teach you step by step how to create a canvas clock using a mini program (example). For more information, please follow other related articles on the PHP Chinese website!