代码：wxml:[html]<viewstyle='width:100%;height:{{canvasHeight}}px'catchtap='goCountdown'catchlongtap='touchstart'catchtouchend='touchend'><canvascanvas-id='clock'style='width:100%;height:{{canvasHeight}}px'></canvas></view>js:[javascript]Page({data:{width:0,height:0,showMask:false},onLoad:function(options){varthat=this//获取系统信息wx.getSystemInfo({//获取系统信息成功，将系统窗口的宽高赋给页面的宽高success:function(res){that.width=res.windowWidththat.height=res.windowHeightthat.setData({canvasWidth:res.windowWidth*0.9*0.52,canvasHeight:res.windowWidth*0.9*0.52*0.9819,rightWidth:res.windowWidth*0.9*0.47})}})},onReady:function(){this.drawClock();//每40ms执行一次drawClock()，this.interval=setInterval(this.drawClock,40);},//所有的canvas属性以及Math.sin,Math.cos()等涉及角度的参数都是用弧度表示//时钟drawClock:function(){let_this=this;constctx=wx.createCanvasContext('clock');varheight=this.height;varwidth=this.width;//设置文字对应的半径varR=this.data.canvasWidth/5;ctx.save();//把原点的位置移动到屏幕中间，及宽的一半，高的一半ctx.translate(this.data.canvasWidth/1.83,this.data.canvasHeight/1.83);//画外框functiondrawBackground(){ctx.setStrokeStyle('#4BB5C3');//设置线条的粗细，单位pxctx.setLineWidth(8);//开始路径ctx.beginPath();//运动一个圆的路径//arc(x,y,半径,起始位置，结束位置，false为顺时针运动)ctx.arc(0,0,R*1.7,0,2*Math.PI,false);ctx.closePath();//描出点的路径ctx.stroke();};//画时钟数functiondrawHoursNum(){ctx.setFontSize(20);//圆的起始位置是从3开始的，所以我们从3开始填充数字varhours=[3,4,5,6,7,8,9,10,11,12,1,2];hours.forEach(function(hour,i){varrad=(2*Math.PI/12)*i;varx=R*Math.cos(rad);vary=R*Math.sin(rad);if(hour==12){ctx.fillText(hour,x-11,y+6);}elseif(hour==6){ctx.fillText(hour,x-5,y+10);}elseif(hour==3){ctx.fillText(hour,x,y+8);}elseif(hour==9){ctx.fillText(hour,x-10,y+8);}else{//ctx.fillText(hour,x-6,y+6);}})};//画数字对应的点functiondrawdots(){for(leti=0;i<60;i++){varrad=2*Math.PI/60*i;varx=(R+15)*Math.cos(rad);vary=(R+15)*Math.sin(rad);ctx.beginPath();//每5个点一个比较大if(i%5==0){ctx.arc(x,y,2,0,2*Math.PI,false);}else{//ctx.arc(x,y,1,0,2*Math.PI,false);}ctx.setFillStyle('black');ctx.fill();}ctx.closePath();}//画时针functiondrawHour(hour,minute){ctx.setStrokeStyle('#000000');//保存画之前的状态ctx.save();ctx.beginPath();//根据小时数确定大的偏移varrad=2*Math.PI/12*hour;//根据分钟数确定小的偏移varmrad=2*Math.PI/12/60*minute;//做旋转ctx.rotate(rad+mrad);ctx.setLineWidth(4);//设置线条结束样式为圆ctx.setLineCap('round');//时针向后延伸8个px；ctx.moveTo(0,8);//一开始的位置指向12点的方向，长度为R/2ctx.lineTo(0,-R/2);ctx.stroke();ctx.closePath();//返回画之前的状态ctx.restore();}//画分针functiondrawMinute(minute,second){ctx.save();ctx.beginPath();//根据分钟数确定大的偏移varrad=2*Math.PI/60*minute;//根据秒数确定小的偏移varmrad=2*Math.PI/60/60*second;ctx.rotate(rad+mrad);//分针比时针细ctx.setLineWidth(3);ctx.setLineCap('round');ctx.moveTo(0,10);//一开始的位置指向12点的方向，长度为3*R/4ctx.lineTo(0,-3*R/4);ctx.stroke();ctx.closePath();ctx.restore();}//画秒针functiondrawSecond(second,msecond){ctx.save();ctx.beginPath();//根据秒数确定大的偏移varrad=2*Math.PI/60*second;//1000ms=1s所以这里多除个1000varmrad=2*Math.PI/60/1000*msecond;ctx.rotate(rad+mrad);ctx.setLineWidth(2);ctx.setStrokeStyle('#4BB5C3');ctx.setLineCap('round');ctx.moveTo(0,12);ctx.lineTo(0,-R);ctx.stroke();ctx.closePath();ctx.restore();}//画出中间那个灰色的圆functiondrawDot(){ctx.beginPath();ctx.arc(0,0,4,0,2*Math.PI,false);ctx.setFillStyle('#FFF9E6');ctx.setLineWidth(6);ctx.setStrokeStyle('#000000');ctx.stroke();ctx.fill();ctx.closePath();}//画蒙层functiondrawMask(){ctx.restore();ctx.rect(0,0,width*0.5,_this.data.canvasHeight);ctx.setFillStyle('rgba(0,0,0,.2)')ctx.fill()}functionClock(){//实时获取各个参数varnow=newDate();varhour=now.getHours();varminute=now.getMinutes()varsecond=now.getSeconds();varmsecond=now.getMilliseconds();if(_this.data.showMask){ctx.scale(0.98,0.98)}//依次执行各个方法drawBackground();drawHoursNum();drawdots();drawSecond(second,msecond);drawHour(hour,minute);drawMinute(minute,second);drawDot();if(_this.data.showMask){drawMask();}ctx.draw();}Clock();},goCountdown(){let_this=this;_this.setData({showMask:true})setTimeout(function(){_this.setData({showMask:false})wx.navigateTo({url:'/pages/countdown/countdown',})},200)},touchstart:function(e){console.log(e)this.setData({showMask:true})},touchend:function(e){this.setData({showMask:false})}})
如果觉得《微信小程序canvas时钟》对你有帮助，请点赞、收藏，并留下你的观点哦！
