微信小程序canvas动态时钟


Posted in Javascript onOctober 22, 2020

本文实例为大家分享了微信小程序canvas动态时钟的具体代码,供大家参考,具体内容如下

canvas时钟效果图:

微信小程序canvas动态时钟

代码:

wxml:

<view style='width:100%;height:{{canvasHeight}}px' catchtap='goCountdown'catchlongtap='touchstart' catchtouchend='touchend'>
  <canvas canvas-id='clock' style='width:100%;height:{{canvasHeight}}px'></canvas>
</view>

js:

Page({
 data: {
  width: 0,
  height: 0,
  showMask: false
 },
 onLoad: function (options) {
  var that = this
  //获取系统信息 
  wx.getSystemInfo({
   //获取系统信息成功,将系统窗口的宽高赋给页面的宽高 
   success: function (res) {
    that.width = res.windowWidth
    that.height = res.windowHeight
    that.setData({
     canvasWidth: res.windowWidth * 0.9 * 0.52,
     canvasHeight: res.windowWidth * 0.9 * 0.52 * 0.9819,
     rightWidth: res.windowWidth * 0.9 * 0.47
    })
   }
  })
 },
 
 onReady: function () {
  this.drawClock();
  // 每40ms执行一次drawClock(),
  this.interval = setInterval(this.drawClock, 40);
 },
 
 
 // 所有的canvas属性以及Math.sin,Math.cos()等涉及角度的参数都是用弧度表示
 // 时钟
 drawClock: function () {
  let _this = this;
  const ctx = wx.createCanvasContext('clock');
  var height = this.height;
  var width = this.width;
  // 设置文字对应的半径
  var R = this.data.canvasWidth / 5;
  ctx.save();
  // 把原点的位置移动到屏幕中间,及宽的一半,高的一半
  ctx.translate(this.data.canvasWidth / 1.83, this.data.canvasHeight / 1.83);
 
  // 画外框
  function drawBackground() {
   ctx.setStrokeStyle('#4BB5C3');
   // 设置线条的粗细,单位px
   ctx.setLineWidth(8);
   // 开始路径
   ctx.beginPath();
   // 运动一个圆的路径
   // arc(x,y,半径,起始位置,结束位置,false为顺时针运动)
   ctx.arc(0, 0, R * 1.7, 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);
    if (hour == 12) {
     ctx.fillText(hour, x - 11, y + 6);
    } else if (hour == 6) {
     ctx.fillText(hour, x - 5, y + 10);
    } else if (hour == 3) {
     ctx.fillText(hour, x, y + 8);
    } else if (hour == 9) {
     ctx.fillText(hour, x - 10, y + 8);
    }
    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.setStrokeStyle('#000000');
   // 保存画之前的状态
   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(4);
   // 设置线条结束样式为圆
   ctx.setLineCap('round');
   // 时针向后延伸8个px;
   ctx.moveTo(0, 8);
   // 一开始的位置指向12点的方向,长度为R/2
   ctx.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(3);
   ctx.setLineCap('round');
   ctx.moveTo(0, 10);
   // 一开始的位置指向12点的方向,长度为3 * R / 4
   ctx.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所以这里多除个1000
   var mrad = 2 * Math.PI / 60 / 1000 * msecond;
   ctx.rotate(rad + mrad);
   ctx.setLineWidth(2);
   ctx.setStrokeStyle('#4BB5C3');
   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, 4, 0, 2 * Math.PI, false);
   ctx.setFillStyle('#FFF9E6');
   ctx.setLineWidth(6);
   ctx.setStrokeStyle('#000000');
   ctx.stroke();
   ctx.fill();
   ctx.closePath();
  }
  //画蒙层
  function drawMask() {
   ctx.restore();
   ctx.rect(0, 0, width * 0.5, _this.data.canvasHeight);
   ctx.setFillStyle('rgba(0,0,0,.2)')
   ctx.fill()
  }
  function Clock() {
   // 实时获取各个参数
   var now = new Date();
   var hour = now.getHours();
   var minute = now.getMinutes()
   var second = now.getSeconds();
   var msecond = now.getMilliseconds();
   if (_this.data.showMask) {
    ctx.scale(0.98,0.98)
   }
   // 依次执行各个方法
   drawBackground();
   drawHoursNum();
   drawdots();
   drawSecond(second, msecond);
   drawHour(hour, minute);
   drawMinute(minute, second);
   drawDot();
   if (_this.data.showMask) {
    drawMask();
   }
   ctx.draw();
  }
  Clock();
 },
 goCountdown() {
  let _this = this;
  _this.setData({
   showMask: true
  })
  setTimeout(function () {
   _this.setData({
    showMask: false
   })
   wx.navigateTo({
    url: '/pages/countdown/countdown',
   })
  }, 200)
 
 },
 touchstart: function (e) {
  console.log(e)
  this.setData({
   showMask: true
  })
 },
 touchend: function (e) {
  this.setData({
   showMask: false
  })
 }
})

为大家推荐现在关注度比较高的微信小程序教程一篇:《微信小程序开发教程》小编为大家精心整理的,希望喜欢。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
使用jQuery内容过滤选择器选择元素实例讲解
Apr 18 Javascript
javascript使用定时函数实现跳转到某个页面
Dec 25 Javascript
前端轻量级MVC框架CanJS详解
Sep 26 Javascript
jQuery oLoader实现的加载图片和页面效果
Mar 14 Javascript
jQuery中next方法用法实例
Apr 24 Javascript
Node.js + Redis Sorted Set实现任务队列
Sep 19 Javascript
Bootstrap复选框和单选按钮美化插件(推荐)
Nov 23 Javascript
Vue+axios 实现http拦截及路由拦截实例
Apr 25 Javascript
JS使用正则表达式验证身份证号码
Jun 23 Javascript
js中split()方法得到的数组长度问题
Jul 19 Javascript
React如何实现浏览器打印部分内容详析
May 19 Javascript
Vue——解决报错 Computed property &quot;****&quot; was assigned to but it has no setter.
Dec 19 Vue.js
vue-cli —— 如何局部修改Element样式
Oct 22 #Javascript
微信小程序入门之绘制时钟
Oct 22 #Javascript
微信小程序入门之指南针
Oct 22 #Javascript
微信小程序实现拼图小游戏
Oct 22 #Javascript
Vue select 绑定动态变量的实例讲解
Oct 22 #Javascript
在Vue中使用Select选择器拼接label的操作
Oct 22 #Javascript
JavaScript 中判断变量是否为数字的示例代码
Oct 22 #Javascript
You might like
mysql5的sql文件导入到mysql4的方法
2008/10/19 PHP
PHP远程采集图片详细教程
2014/07/01 PHP
PHP使用PhpSpreadsheet操作Excel实例详解
2020/03/26 PHP
asp javascript 实现关闭窗口时保存数据的办法
2007/11/24 Javascript
javascript匿名函数应用示例介绍
2014/03/07 Javascript
Javascript验证上传图片大小[前台处理]
2014/07/18 Javascript
基于KO+BootStrap+MVC实现的分页控件代码分享
2016/11/07 Javascript
JS实现类似百叶窗下拉菜单效果
2016/12/30 Javascript
JS表单数据验证的正则表达式(常用)
2017/02/18 Javascript
微信小程序--onShareAppMessage分享参数用处(页面分享)
2017/04/18 Javascript
详解react如何在组件中获取路由参数
2017/06/15 Javascript
React 无状态组件(Stateless Component) 与高阶组件
2018/08/14 Javascript
javascript中函数的写法实例代码详解
2018/10/28 Javascript
JavaScript学习笔记之DOM基础操作实例小结
2019/01/09 Javascript
详解vue+axios给开发环境和生产环境配置不同的接口地址
2019/08/16 Javascript
微信小程序实现列表滚动头部吸顶的示例代码
2020/07/12 Javascript
Vue中nprogress页面加载进度条的方法实现
2020/11/13 Javascript
python类定义的讲解
2013/11/01 Python
Python如何判断数独是否合法
2016/09/08 Python
解决pycharm工程启动卡住没反应的问题
2019/01/19 Python
详解Python函数式编程—高阶函数
2019/03/29 Python
python循环定时中断执行某一段程序的实例
2019/06/29 Python
通过Python实现Payload分离免杀过程详解
2020/07/13 Python
python3中确保枚举值代码分析
2020/12/02 Python
Python爬虫之App爬虫视频下载的实现
2020/12/08 Python
Python 使用SFTP和FTP实现对服务器的文件下载功能
2020/12/17 Python
HTML5+CSS3实现无插件拖拽上传图片(支持预览与批量)
2017/01/05 HTML / CSS
乐高积木玩具美国官网:LEGO Shop US
2016/09/16 全球购物
客服主管岗位职责
2013/12/13 职场文书
公司财务自我评价分享
2013/12/17 职场文书
安全生产标语
2014/06/06 职场文书
2014年庆祝国庆65周年演讲稿
2014/09/21 职场文书
员工年终考核评语
2014/12/31 职场文书
2015年销售员工作总结范文
2015/04/07 职场文书
汽车销售助理岗位职责
2015/04/14 职场文书
Python+uiautomator2实现自动刷抖音视频功能
2021/04/29 Python