JS绘制微信小程序画布时钟

// 获取应用实例 Page({  data:{   width:0,   height:0  },  //onLoad生命周期函数，监听页面加载  onLoad: function(){   //将全局变量Index保存在that中，里面函数调用   var that = this   //获取系统信息   wx.getSystemInfo({    //获取系统信息成功，将系统窗口的宽高赋给页面的宽高    success: function(res) {     that.width = res.windowWidth     that.height = res.windowHeight    }   })  },  //onReady生命周期函数，监听页面初次渲染完成  onReady: function(){   //调用canvasClock函数   this.canvasClock()   //对canvasClock函数循环调用   this.interval = setInterval(this.canvasClock,1000)  },  canvasClock: function(){   var context = wx.createContext()//创建并返回绘图上下文（获取画笔）   //设置宽高   var width = this.width   var height = this.height   var R = width/2-55;//设置文字距离时钟中心点距离   //重置画布函数   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();   }   //调用   function drawClock(){    reSet();    circle();    num();    smallGrid();    bigGrid();    move();   }   drawClock()//调用运动函数   // 调用 wx.drawCanvas，通过 canvasId 指定在哪张画布上绘制，通过 actions 指定绘制行为   wx.drawCanvas({    canvasId:'myCanvas',    actions: context.getActions()   })  },  //页面卸载，清除画布绘制计时器  onUnload:function(){   clearInterval(this.interval)  } }) 

<canvas canvas-id="myCanvas" class="canvas"></canvas> 

.canvas{  width: 100%;  height: 100%;  position: fixed; } 

{  "pages": [   "pages/index"  ],  "window": {  "navigationBarTextStyle": "light",  "navigationBarTitleText": "画布时钟",  "navigationBarBackgroundColor": "#000",  "backgroundColor": "#fbf9fe"  } }