超详细，用canvas在微信小程序上画时钟教程

<!--index.wxml-->
<view class="container">
<canvas canvas-id="clock"/>
</view>

/**index.wxss**/.container {height: 100%;width: 100%;
}canvas {height: 100%;width: 100%;
}/*有些人会有疑问为什么设置了100%却没有100%，其实要到app.wxss里设置一下*/
/**app.wxss**/
page{width:100%;height:100%;
}

Page({data: {width: 0,height: 0},onLoad: function (options) {var that = this//获取系统信息  
    wx.getSystemInfo({//获取系统信息成功，将系统窗口的宽高赋给页面的宽高  success: function (res) {that.width = res.windowWidth// console.log(that.width)   375that.height = res.windowHeight// console.log(that.height)  625// 这里的单位是PX，实际的手机屏幕有一个Dpr，这里选择iphone，默认Dpr是2
      }})},onReady: function () {this.drawClock();// 每40ms执行一次drawClock()，人眼看来就是流畅的画面this.interval = setInterval(this.drawClock, 40);},// 所有的canvas属性以及Math.sin,Math.cos()等涉及角度的参数都是用弧度表示// 时钟drawClock: function () {const ctx = wx.createCanvasContext('clock');var height = this.height;var width = this.width;// 设置文字对应的半径var R = width / 2 - 60;// 把原点的位置移动到屏幕中间，及宽的一半，高的一半ctx.translate(width / 2, height / 2);// 画外框function drawBackground() {// 设置线条的粗细，单位pxctx.setLineWidth(8);// 开始路径
      ctx.beginPath();// 运动一个圆的路径// arc(x,y,半径,起始位置，结束位置，false为顺时针运动)ctx.arc(0, 0, width / 2 - 30, 0, 2 * Math.PI, false);ctx.closePath();// 描出点的路径
      ctx.stroke();};// 画时钟数function drawHoursNum() {ctx.setFontSize(20);// 圆的起始位置是从3开始的，所以我们从3开始填充数字var hours = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2];hours.forEach(function (hour, i) {var rad = (2 * Math.PI / 12) * i;var x = R * Math.cos(rad);var y = R * Math.sin(rad);// 因为微信小程序不支持BaseLine这个属性，所以这里我们只能自己手动调整位置if (hour == 12) {ctx.fillText(hour, x - 11, y + 6);} else if (hour == 6) {ctx.fillText(hour, x - 5, y + 6);} else {ctx.fillText(hour, x - 6, y + 6);}})};// 画数字对应的点function drawdots() {for (let i = 0; i < 60; i++) {var rad = 2 * Math.PI / 60 * i;var x = (R + 15) * Math.cos(rad);var y = (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();}// 画时针function drawHour(hour, minute) {// 保存画之前的状态
      ctx.save();ctx.beginPath();// 根据小时数确定大的偏移var rad = 2 * Math.PI / 12 * hour;// 根据分钟数确定小的偏移var mrad = 2 * Math.PI / 12 / 60 * minute;// 做旋转ctx.rotate(rad + mrad);ctx.setLineWidth(8);// 设置线条结束样式为圆ctx.setLineCap('round');// 时针向后延伸8个px；ctx.moveTo(0, 8);// 一开始的位置指向12点的方向，长度为R/2ctx.lineTo(0, -R / 2);ctx.stroke();ctx.closePath();// 返回画之前的状态
      ctx.restore();}// 画分针function drawMinute(minute, second) {ctx.save();ctx.beginPath();// 根据分钟数确定大的偏移var rad = 2 * Math.PI / 60 * minute;// 根据秒数确定小的偏移var mrad = 2 * Math.PI / 60 / 60 * second;ctx.rotate(rad + mrad);// 分针比时针细ctx.setLineWidth(6);ctx.setLineCap('round');ctx.moveTo(0, 10);// 一开始的位置指向12点的方向，长度为3 * R / 4ctx.lineTo(0, -3 * R / 4);ctx.stroke();ctx.closePath();ctx.restore();}// 画秒针function drawSecond(second, msecond) {ctx.save();ctx.beginPath();// 根据秒数确定大的偏移var rad = 2 * Math.PI / 60 * second;// 1000ms=1s所以这里多除个1000var mrad = 2 * Math.PI / 60 / 1000 * msecond;ctx.rotate(rad + mrad);ctx.setLineWidth(4);// 设置线条颜色为红色，默认为黑色ctx.setStrokeStyle('red');ctx.setLineCap('round');ctx.moveTo(0, 12);ctx.lineTo(0, -R);ctx.stroke();ctx.closePath();ctx.restore();}//画出中间那个灰色的圆function drawDot() {ctx.beginPath();ctx.arc(0, 0, 8, 0, 2 * Math.PI, false);ctx.setFillStyle('lightgrey');ctx.fill();ctx.closePath();}function Clock() {// 实时获取各个参数var now = new Date();var hour = now.getHours();var minute = now.getMinutes()var second = now.getSeconds();var msecond = now.getMilliseconds();// 依次执行各个方法
      drawBackground();drawHoursNum();drawdots();drawHour(hour, minute);drawMinute(minute, second);drawSecond(second, msecond);drawDot();// 微信小程序要多个draw才会画出来，所以在最后画出
      ctx.draw();}// 执行Clock这个方法，实际上执行了所有步骤
    Clock();}
})