微信小程序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.outerWidth() 函数具体用法
Jul 20 Javascript
浅谈JavaScript中小数和大整数的精度丢失
May 31 Javascript
详解使用fetch发送post请求时的参数处理
Apr 05 Javascript
jQuery简单实现向列表动态添加新元素的方法示例
Dec 25 jQuery
vue awesome swiper异步加载数据出现的bug问题
Jul 03 Javascript
Layui 带多选框表格监听事件以及按钮自动点击写法实例
Sep 02 Javascript
解决Layui数据表格显示无数据提示的问题
Nov 14 Javascript
Vue中qs插件的使用详解
Feb 07 Javascript
Vue $emit()不能触发父组件方法的原因及解决
Jul 28 Javascript
vue+vant 上传图片需要注意的地方
Jan 03 Vue.js
CocosCreator入门教程之网络通信
Apr 16 Javascript
浅谈TypeScript 索引签名的理解
Oct 16 Javascript
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
载入进度条 效果
2006/07/08 Javascript
JavaScript方法和技巧大全
2006/12/27 Javascript
推荐30个新鲜出炉的精美 jQuery 效果
2012/03/26 Javascript
jquery判断元素的子元素是否存在的示例代码
2014/02/04 Javascript
JS清空多文本框、文本域示例代码
2014/02/24 Javascript
如何在MVC应用程序中使用Jquery
2014/11/17 Javascript
javascript 判断整数方法分享
2014/12/16 Javascript
php常见的页面跳转方法汇总
2015/04/15 Javascript
jquery实现点击弹出带标题栏的弹出层(从右上角飞入)效果
2015/09/19 Javascript
解决angular的$http.post()提交数据时后台接收不到参数值问题的方法
2015/12/10 Javascript
JS、jQuery中select的用法详解
2016/04/21 Javascript
详解JavaScript的闭包、IIFE、apply、函数与对象
2016/12/21 Javascript
详解nodejs操作mongodb数据库封装DB类
2017/04/10 NodeJs
微信小程序 刷新上拉下拉不会断详细介绍
2017/05/11 Javascript
详解Angular2中Input和Output用法及示例
2017/05/21 Javascript
一文搞懂ES6中的Map和Set
2019/05/20 Javascript
layui表格内放置图片,并点击放大的实例
2019/09/10 Javascript
浅谈vue中使用编辑器vue-quill-editor踩过的坑
2020/08/03 Javascript
python 调用HBase的简单实例
2016/12/18 Python
利用python实现简单的邮件发送客户端示例
2017/12/23 Python
Python实现的爬取网易动态评论操作示例
2018/06/06 Python
解决django同步数据库的时候app models表没有成功创建的问题
2019/08/09 Python
Python3之字节串bytes与字节数组bytearray的使用详解
2019/08/27 Python
为什么称python为胶水语言
2020/06/16 Python
Python中全局变量和局部变量的理解与区别
2021/02/07 Python
HTML5 Canvas API中drawImage()方法的使用实例
2016/03/25 HTML / CSS
澳大利亚汽车零部件、音响及配件超市:Automotive Superstore
2018/06/19 全球购物
马来西亚在线购物市场:PGMall.my
2019/10/13 全球购物
VC++笔试题
2014/10/13 面试题
建筑文秘专业个人求职信范文
2013/12/28 职场文书
秋季校运动会广播稿
2014/02/23 职场文书
施工质量承诺书范文
2014/05/30 职场文书
森林病虫害防治方案
2014/06/02 职场文书
项目合作意向书
2015/05/08 职场文书
初中思品教学反思
2016/02/20 职场文书
MySQL查询日期时间
2022/05/15 MySQL