Vous apprendre étape par étape comment créer une horloge en toile à l'aide d'un mini programme (exemple)

Cet article vous guidera étape par étape dans l'utilisation de l'applet WeChat pour créer une horloge en toile. J'espère qu'il vous sera utile !

Ce que je fabrique aujourd'hui est une horloge en toile d'applet WeChat, qui est une horloge numérique traditionnelle. [Recommandations d'apprentissage associées : Tutoriel de développement de mini-programmes]

Directement au-dessus de l'image, l'effet est tel qu'illustré.

onLoad: function(){
		//将全局变量Index保存在that中，里面函数调用
		var that = this
		//获取系统信息
		wx.getSystemInfo({
			//获取系统信息成功，将系统窗口的宽高赋给页面的宽高
			success: function(res) {
				that.width = res.windowWidth
				that.height = res.windowHeight
			}
		})
	},

La première chose est de lire la largeur et la hauteur de l'écran. Il s'agit de calculer la position de l'horloge plus tard afin qu'elle puisse être placée au centre. La fonction de cycle de vie

onReady: function(){
		//调用canvasApp函数
		this.canvasClock()
		//对canvasAPP函数循环调用
		this.interval = setInterval(this.canvasClock,1000)
	},

onReady surveille l'achèvement du rendu initial de la page. Ajoutez ensuite une minuterie pour exécuter la fonction this.canvasClock toutes les secondes.

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

La partie ci-dessus est relativement fixe, c'est-à-dire les cercles, les échelles, les chiffres, etc. qui ne bougeront pas. Cependant, comme la toile doit être nettoyée à chaque fois que vous dessinez, cette partie doit également être recyclée.

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

La dernière étape est la plus difficile. La difficulté réside dans le calcul de la relation entre l'aiguille des heures, l'aiguille des minutes et l'aiguille des secondes. Mais ce sont toutes des formules mathématiques. Tant que les angles sont calculés, le reste sera facile à gérer.

Adresse originale : https://juejin.cn/post/7008355969600061447

Auteur : Code Like Poetry

Pour plus de connaissances liées à la programmation, veuillez visiter : Vidéo de programmation ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!