미니 프로그램을 사용하여 캔버스 시계를 만드는 방법을 단계별로 가르쳐주세요(예제)

이 기사에서는 WeChat 애플릿을 사용하여 캔버스 시계를 만드는 방법을 단계별로 설명합니다.

오늘 제가 만들어 볼 것은 전통적인 디지털 시계인 위챗 애플릿 캔버스 시계입니다. [관련 학습 추천 : 미니 프로그램 개발 튜토리얼]

그림 바로 위에 보이는 효과는 다음과 같습니다.

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

저자: Code Like Poetry

더 많은 프로그래밍 관련 지식을 보시려면 프로그래밍 영상을 방문해 주세요! !

위 내용은 미니 프로그램을 사용하여 캔버스 시계를 만드는 방법을 단계별로 가르쳐주세요(예제)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!