微信小程序使用canvas绘制钟表
更新时间:2021年5月28日 15:00 点击:1944
本文实例为大家分享了微信小程序使用canvas绘制钟表的具体代码,供大家参考,具体内容如下
模拟时钟
利用canvas绘制时钟,实现模拟时钟的功能,钟表时间与系统时间保持一致,刻度将24小时制转换为12小时制,需要分别绘图出中心圆、外层大圆、分针、时针、秒针。
效果图如下:
代码如下:
index.wxml
<canvas canvas-id="myCanvas" class="mycanvas"></canvas>
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 <= 12; ++i){ // 利用三角函数计算文本坐标 var x = r * Math.cos(D30 * i - D90) var y = r * Math.sin(D30 * i - D90) if(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() } } })
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持猪先飞。
上一篇: JavaScript实现动态数字时钟
下一篇: ThingJS粒子特效一键实现雨雪效果
相关文章
- 这篇文章主要介绍了微信小程序 页面传值详解的相关资料,需要的朋友可以参考下...2017-03-13
- 这篇文章主要为大家详细介绍了微信小程序自定义tabbar组件,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-03-14
- 这篇文章主要介绍了微信小程序 网络请求(GET请求)详解的相关资料,需要的朋友可以参考下...2016-11-22
- 这篇文章主要给大家介绍了关于微信小程序如何获取图片宽度与高度的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-10
- 这篇文章主要介绍了微信小程序 二维码生成工具 weapp-qrcode详解,教大家如何在项目中引入weapp-qrcode.js文件,通过实例代码给大家介绍的非常详细,需要的朋友可以参考下...2021-10-23
- 这篇文章主要介绍了微信小程序手势操作之单触摸点与多触摸点的相关资料,需要的朋友可以参考下...2017-03-13
- 这篇文章主要介绍了微信小程序(应用号)开发新闻客户端实例的相关资料,需要的朋友可以参考下...2016-10-25
- 这篇文章主要为大家详细介绍了微信小程序实现canvas分享朋友圈海报,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-06-21
- 这篇文章主要介绍了微信小程序 页面跳转传递值几种方法详解的相关资料,需要的朋友可以参考下...2017-01-16
- 这篇文章主要为大家详细介绍了微信小程序实现选择地址省市区三级联动,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-06-21
- 这篇文章主要为大家详细介绍了微信小程序实现点击导航条切换页面,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-11-19
- 这篇文章主要介绍了uniapp,微信小程序中使用 MQTT的问题,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-07-11
- 这篇文章主要介绍了微信小程序自定义底部弹出框动画,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-11-16
- 这篇文章主要为大家详细介绍了js canvas实现滑块验证,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-03-14
- 微信小程序目前的火热程度相信不用多言,最近利用空余时间用小程序实现了个动态的登录页效果,所以下面这篇文章主要给大家介绍了利用微信小程序实现登录页云层漂浮动画效果的相关资料,需要的朋友可以参考借鉴,下面来一起看看吧。...2017-05-09
- 这篇文章主要介绍了微信小程序 通过控制CSS实现view隐藏与显示的相关资料,需要的朋友可以参考下...2017-05-27
JavaScript+html5 canvas绘制的小人效果
这篇文章主要介绍了JavaScript+html5 canvas绘制的小人效果,涉及JavaScript结合html5 canvas图形绘制及颜色随机填充的技巧,需要的朋友可以参考下...2016-01-29- 这篇文章主要介绍了微信小程序 富文本转文本实例详解的相关资料,需要的朋友可以参考下...2016-10-25
- 这篇文章主要为大家详细介绍了微信小程序入门之绘制时钟,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-10-23
- 相信大家现在都知道微信小程序吧,下面这篇文章主要给大家介绍了微信小程序开发之map地图的相关资料,分享出来供大家参考学习,文中通过示例代码介绍的非常详细,需要的朋友们下面跟着小编来一起学习学习吧。...2017-06-15