微信小程序入门之绘制时钟


Posted in Javascript onOctober 22, 2020

微信小程序入门案例——绘制时钟,供大家参考,具体内容如下

涉及内容:canvas、每秒刷新页面、绘制

目录结构:

微信小程序入门之绘制时钟

pages\index\index.js

Page({
 
 /**
 * 页面的初始数据
 */
 data: {
 
 },
 
 /**
 * 生命周期函数--监听页面加载
 */
 onLoad: function (options) {
 this.ctx = wx.createCanvasContext('clockCanvas')
 this.drawClock()
 var that = this
 this.interval=setInterval(function(){
 that.drawClock()
 },1000)
 
 },
 
 /**
 * 绘制时钟
 */
 drawClock:function(){
 /**
 * 准备工作
 */
 let width = 300,height=300
 var ctx= this.ctx
 ctx.translate(width/2,height/2)
 ctx.rotate(-Math.PI/2)
 
 /**
 * 绘制时钟刻度
 */
 ctx.lineWidth=6
 ctx.lineCap='round'
 for(let i=0;i<12;i++){
 ctx.beginPath()
 ctx.moveTo(80,0)
 ctx.lineTo(100,0)
 ctx.stroke()
 ctx.rotate(Math.PI/6)
 }
 
 
 
 
 ctx.lineWidth=5
 ctx.lineCap='round'
 for(let i = 0;i<60;i++){
 ctx.beginPath()
 ctx.moveTo(88,0)
 ctx.lineTo(100,0)
 ctx.stroke()
 ctx.rotate(Math.PI/30)
 }
 
 
 /**
 * 获取按当前时间
 */
 let time = this.getTime()
 let h = time[0]
 let m = time[1]
 let s = time[2]
 
 /**
 * 绘制时钟指针
 */
 ctx.save()
 ctx.rotate(h * Math.PI/6 + m * Math.PI/360 + s * Math.PI/21600)
 ctx.lineWidth=12
 ctx.beginPath()
 ctx.moveTo(-20,0)
 ctx.lineTo(60,0)
 ctx.stroke()
 ctx.restore()
 /**
 * 绘制时钟分针
 */
 ctx.save()
 ctx.rotate(m * Math.PI/30 + s * Math.PI/1800)
 ctx.lineWidth=8
 ctx.beginPath()
 ctx.moveTo(-20,0)
 ctx.lineTo(82,0)
 ctx.stroke()
 ctx.restore()
 /**
 * 绘制时钟妙针
 */
 ctx.save()
 ctx.rotate(s*Math.PI/30)
 ctx.strokeStyle = 'red'
 ctx.lineWidth = 6
 ctx.beginPath()
 ctx.moveTo(-30,0)
 ctx.lineTo(90,0)
 ctx.stroke()
 
 ctx.fillStyle='red'
 ctx.beginPath()
 ctx.arc(0,0,10,0,Math.PI*2,true)
 ctx.fill()
 ctx.restore()
 
 
 /**
 * 绘制
 */
 ctx.draw()
 
 /**
 * 更新页面显示时间
 */
 this.setData({
 h:h>9?h:'0'+h,
 m:m>9?m:'0'+m,
 s:s>9?s:'0'+s
 })
 },
 getTime:function(){
 let now = new Date()
 let time=[]
 time[0]=now.getHours()
 time[1]=now.getMinutes()
 time[2]=now.getSeconds()
 
 if(time[0]>12){
 time[0]-=12
 }
 return time
 },
 
 /**
 * 生命周期函数--监听页面初次渲染完成
 */
 onReady: function () {
 
 },
 
 /**
 * 生命周期函数--监听页面显示
 */
 onShow: function () {
 
 },
 
 /**
 * 生命周期函数--监听页面隐藏
 */
 onHide: function () {
 
 },
 
 /**
 * 生命周期函数--监听页面卸载
 */
 onUnload: function () {
 clearInterval(this.interval)
 },
 
 /**
 * 页面相关事件处理函数--监听用户下拉动作
 */
 onPullDownRefresh: function () {
 
 },
 
 /**
 * 页面上拉触底事件的处理函数
 */
 onReachBottom: function () {
 
 },
 
 /**
 * 用户点击右上角分享
 */
 onShareAppMessage: function () {
 
 }
})

pages\index\index.wxml

<view class="container">
 <text>My Clock</text>
 <canvas canvas-id="clockCanvas"></canvas>
 <text>{{h}}:{{m}}:{{s}}</text>
</view>

pages\index\index.wxss

.container{
 height: 100vh;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: space-around;
}
text{
 font-size: 40pt;
 font-weight: bold;
}
canvas{
 width: 600rpx;
 height: 600rpx;
 
}

app.js

App({
 
 /**
 * 当小程序初始化完成时,会触发 onLaunch(全局只触发一次)
 */
 onLaunch: function () {
 
 },
 
 /**
 * 当小程序启动,或从后台进入前台显示,会触发 onShow
 */
 onShow: function (options) {
 
 },
 
 /**
 * 当小程序从前台进入后台,会触发 onHide
 */
 onHide: function () {
 
 },
 
 /**
 * 当小程序发生脚本错误,或者 api 调用失败时,会触发 onError 并带上错误信息
 */
 onError: function (msg) {
 
 }
})

app.json

{
 "pages":[
 "pages/index/index"
 ],
 "window":{
 "backgroundTextStyle":"light",
 "navigationBarBackgroundColor": "#fff",
 "navigationBarTitleText": "我的时钟",
 "navigationBarTextStyle":"black"
 },
 "style": "v2",
 "sitemapLocation": "sitemap.json"
}

运行截图:

微信小程序入门之绘制时钟

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

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

Javascript 相关文章推荐
JQuery从头学起第一讲
Jul 04 Javascript
js下将字符串当函数执行的方法
Jul 13 Javascript
javascript学习笔记(二) js一些基本概念
Jun 18 Javascript
js修改table中Td的值(定义td的双击事件)
Jan 10 Javascript
JQuery使用index方法获取Jquery对象数组下标的方法
May 18 Javascript
jQuery简单获取键盘事件的方法
Jan 22 Javascript
js实现数组去重方法及效率?Ρ? target=
Feb 14 Javascript
详解基于Node.js的微信JS-SDK后端接口实现代码
Jul 15 Javascript
Vue中实现权限控制的方法示例
Jun 07 Javascript
JavaScript 继承 封装 多态实现及原理详解
Jul 29 Javascript
Vue父子传递实例讲解
Feb 14 Javascript
如何利用React实现图片识别App
Feb 18 Javascript
微信小程序入门之指南针
Oct 22 #Javascript
微信小程序实现拼图小游戏
Oct 22 #Javascript
Vue select 绑定动态变量的实例讲解
Oct 22 #Javascript
在Vue中使用Select选择器拼接label的操作
Oct 22 #Javascript
JavaScript 中判断变量是否为数字的示例代码
Oct 22 #Javascript
关于vue属性使用和不使用冒号的区别说明
Oct 22 #Javascript
jquery实现抽奖功能
Oct 22 #jQuery
You might like
php 设计模式之 单例模式
2008/12/19 PHP
浅谈PHP链表数据结构(单链表)
2016/06/08 PHP
laravel框架模型、视图与控制器简单操作示例
2019/10/10 PHP
JS 常用校验函数
2009/03/26 Javascript
基于JQuery制作的产品广告效果
2010/12/08 Javascript
解析jquery中的ajax缓存问题
2013/12/19 Javascript
java、javascript实现附件下载示例
2014/08/14 Javascript
深入理解javascript变量声明
2014/11/20 Javascript
Js 正则表达式知识汇总
2014/12/02 Javascript
原生JS实现-星级评分系统的简单实例
2016/08/21 Javascript
详解js中==与===的区别
2017/01/08 Javascript
thinkjs之页面跳转同步异步操作
2017/02/05 Javascript
JS中setTimeout和setInterval的最大延时值详解
2017/02/13 Javascript
Bootstrap栅格系统简单实现代码
2017/03/06 Javascript
JavaScript实现的文本框placeholder提示文字功能示例
2018/07/25 Javascript
超好用的jQuery分页插件jpaginate用法示例【附源码下载】
2018/12/06 jQuery
Angular请求防抖处理第一次请求失效问题
2019/05/17 Javascript
JS中比Switch...Case更优雅的多条件判断写法
2019/09/05 Javascript
node.js爬虫框架node-crawler初体验
2020/10/29 Javascript
[01:39](回顾)各路豪强针锋相对,几经鏖战四强产生
2014/07/01 DOTA
python中cPickle用法例子分享
2014/01/03 Python
Python 基于FIR实现Hilbert滤波器求信号包络详解
2020/02/26 Python
python 5个顶级异步框架推荐
2020/09/09 Python
HTML5和CSS3让网页设计提升到下一个高度
2009/08/14 HTML / CSS
墨西哥运动服饰和鞋网上商店:Netshoes墨西哥
2016/07/28 全球购物
小米官方旗舰店:Xiaomi
2020/08/07 全球购物
水果连锁超市创业计划书
2014/01/24 职场文书
执行总经理岗位职责
2014/02/03 职场文书
道德演讲稿
2014/05/21 职场文书
英语系本科生求职信
2014/07/15 职场文书
公务员学习习总书记“三严三实”思想汇报
2014/09/19 职场文书
2015年小学美术工作总结
2015/05/25 职场文书
遗愿清单观后感
2015/06/09 职场文书
vue如何实现关闭对话框后刷新列表
2022/04/08 Vue.js
vue选项卡切换的实现案例
2022/04/11 Vue.js
Java数组详细介绍及相关工具类
2022/04/14 Java/Android