微信小程序canvas 动画(微信小程序使用canvas绘制钟表)
类别:编程学习 浏览量:932
时间:2022-01-25 00:46:49 微信小程序canvas 动画
微信小程序使用canvas绘制钟表本文实例为大家分享了微信小程序使用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() } } })
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- 微信小程序开发模式(微信小程序引入Vant框架的全过程记录)
- 微信小程序scrollview 截图(微信小程序scroll-view不能左右滑动问题的解决方法)
- 微信小程序function怎么使用(微信小程序在{{ }}中直接使用函数的方法示例)
- 微信小程序企业微信打卡(使用Python实现企业微信的自动打卡功能)
- 微信小程序贪吃蛇大作战(微信小程序实现贪吃蛇游戏)
- 微信小程序苹果部分内容打不开(微信小程序audio组件在ios端无法播放的解决办法)
- 微信小程序简易计算器制作(微信小程序实现简单计算器功能)
- 微信小程序可以用h5开发不(微信小程序webView嵌入H5的方法实例)
- 微信小程序签名怎么操作(微信小程序实现简单手写签名组件的方法实例)
- 微信小程序swiper大小调整(微信小程序swiper-dot中的点如何改成滑块详解)
- 微信小程序做计算器(微信小程序实现计算器小功能)
- 微信小程序语音录入(微信小程序使用同声传译实现语音识别功能)
- 微信小程序css使用技巧(微信小程序 CSS filter滤镜的使用示例详解)
- 微信小程序js 抽奖概率(小程序实现筛子抽奖)
- 微信小程序的交通码(微信小程序中实现车牌输入功能)
- 微信小程序计算器怎么用(微信小程序实现计算器功能)
- 这个全椒人被通报表彰,看看你认识吗(这个全椒人被通报表彰)
- 全椒人,38年集体回忆 1980-2018 ,看完不要哭(全椒人38年集体回忆)
- 董元奔吟咏历代文人 1012新旧均可 全椒人张璪 1022 -1093(董元奔吟咏历代文人)
- 泪目 这位 刷屏 的英雄,是全椒人的骄傲(泪目这位刷屏)
- 人从众 火炎焱 全椒再现 正月十六走太平 的魅力(人从众火炎焱全椒再现)
- 官宣 全椒籍明星许海峰 奚秀兰 方芳 王璐瑶携手回家 走太平(全椒籍明星许海峰)
热门推荐
- escape()、encodeURI()、encodeURIComponent()区别
- 织梦dedecms建站的核心经验和技巧(dedecms模板安装教程及模板相关知识学习)
- element加固态(Element Plus实现Affix 固钉)
- mysql 多表连接查询(MySQL多表查询的具体实例)
- 个人对云服务器ecs的理解(ecs云服务器怎么搭建网站)
- sqlserver表导入数据(在SQLserver数据库之间进行传表和传数据的图文教程)
- 如何让mysql强制设置复杂的密码
- php7.4类型属性实例详解(PHP 7.4中使用预加载的方法详解)
- nginx反向代理spring boot(Nginx+SpringBoot实现负载均衡的示例)
- vue如何检查数组变化(Vue2中无法检测到数组变动的原因及解决)