这篇文章主要为大家详细介绍了微信小程序使用canvas绘制钟表，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了微信小程序使用canvas绘制钟表的具体代码，供大家参考，具体内容如下
模拟时钟
利用canvas绘制时钟，实现模拟时钟的功能，钟表时间与系统时间保持一致，刻度将24小时制转换为12小时制，需要分别绘图出中心圆、外层大圆、分针、时针、秒针。
效果图如下：
代码如下：
index.wxml
index.wxss
/**index.wxss**/ .mycanvas { width: 100%; height: 100%; position: fixed; }
index.js
Page({ width: 0, //窗口宽度 height: 0, //窗口高度 onLoad: function () { // 获取系统信息 wx.getSystemInfo({ // 获取系统信息成功，保存获取到的系统窗口的宽高 success: res => { // console.log(res) this.width = res.windowWidth this.height = res.windowHeight } }) }, timer: null, //定时器 onReady: function(){ //创建ctx实例 var ctx = wx.createCanvasContext('myCanvas') //将角度转换为弧度，方便在后面使用 //计算公式：弧度 = 角度*Math.PI / 180 const D6 = 6 * Math.PI / 180 const D30 = 30 * Math.PI / 180 const D90 = 90 * Math.PI / 180 // 获取宽和高值 var width = this.width, height = this.height // 计算表盘半径，留出 30px 外边距 var radius = width / 2 -30 // 每秒绘制一次 draw() this.timer = setInterval(draw, 1000) // 绘制函数 function draw(){ // 设置坐标轴原点为窗口的中心点 ctx.translate(width / 2, height / 2) // 绘制表盘 drawClock(ctx,radius) // 绘制指针 drawHand(ctx, radius) //执行绘制 ctx.draw() } // 绘制表盘部分 function drawClock(ctx, radius){ // 绘制大圆 // 大圆的半径 radius 线条粗细为2px ctx.setLineWidth(2) //设置线条粗细 ctx.beginPath() //开始一个新路径 ctx.arc(0, 0, radius, 0, 2 * Math.PI, true) ctx.stroke() //画线 // 绘制同心圆 // 中心圆的半径为8px 线条粗细为1px ctx.setLineWidth(1) //设置线条粗细 ctx.beginPath() //开始一个新路径 ctx.arc(0, 0, 8, 0, 2 * Math.PI, true) ctx.stroke() //画线 // 绘制大刻度盘 线条粗细为5px ctx.setLineWidth(5) for (var i = 0; i <12; ++i){ // 以原点为中心顺时针(多次调用旋转的角度会叠加) // 大刻度盘需要绘制12个线条，表示12个小时，每次旋转30度 ctx.rotate(D30) // 360 / 12 = 30 ctx.beginPath() ctx.moveTo(radius, 0) ctx.moveTo(radius - 15, 0) //大刻度长度15px ctx.stroke() } // 绘制小刻度盘，线条粗细为1px ctx.setLineWidth(1) for(var i = 0; i <60; ++i){ // 小刻度盘需要绘制60个线条，表示60分钟或60秒，每次旋转6度 ctx.rotate(D6) ctx.beginPath() ctx.moveTo(radius, 0) ctx.lineTo(radius - 10, 0) //小刻度盘长度10px ctx.stroke() } //绘制文本 ctx.setFontSize(20) //字号 ctx.textBaseline = 'middle' // 文本垂直居中 // 计算文本距离表盘中心点的半径r var r = radius - 30 for(var i = 1; i 10){ // 调整11 和12位置 // 在画布上绘制文本 fillText(文本，左上角x坐标，左上角y坐标) ctx.fillText(i, x - 12, y) } else { ctx.fillText(i, x-6, y) } } } //绘制指针部分 function drawHand(ctx, radius){ var t = new Date() // 获取当前时间 var h = t.getHours() //小时 var m = t.getMinutes() //分 var s = t.getSeconds() // 秒 h = h > 12 ? h -12 :h //将24小时制转换为12小时制 //时间从三点开始，逆时针旋转90度，指向12点 ctx.rotate(-D90) //绘制时针 ctx.save() //记录旋转状态 // 计算时针指向的刻度 // 通过 30度 * h 可以计算每个整点的旋转角度 // 如果时间不是整点，需要使用h + m / 60 + s / 3600 计算准确的偏移度 ctx.rotate(D30 * (h + m / 60 + s / 3600)) ctx.setLineWidth(6) ctx.beginPath() ctx.moveTo(-20, 0) ctx.lineTo(radius / 2.6, 0) ctx.stroke() ctx.restore() // 绘制分针 ctx.save() ctx.rotate(D6 * (m + s / 60)) ctx.setLineWidth(4) ctx.beginPath() ctx.moveTo(-20, 0) ctx.lineTo(radius / 1.8, 0) ctx.stroke() ctx.restore() //绘制秒针 ctx.save() ctx.rotate(D6 * s) ctx.setLineWidth(2) ctx.beginPath() ctx.moveTo(-20, 0) ctx.lineTo(radius / 1.6, 0) ctx.stroke() ctx.restore() } } })
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。
以上就是微信小程序使用canvas绘制钟表的详细内容，更多请关注本站其它相关文章！
