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


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 相关文章推荐
JavaScript的setAttribute兼容性问题解决方法
Nov 11 Javascript
js实现的GridView即表头固定表体有滚动条且可滚动
Feb 19 Javascript
Javascript实现Web颜色值转换
Feb 05 Javascript
js实现登陆遮罩效果的方法
Jul 28 Javascript
jquery结合html实现中英文页面切换
Nov 29 Javascript
详解vue2路由vue-router配置(懒加载)
Apr 08 Javascript
js使用原型对象(prototype)需要注意的地方
Aug 28 Javascript
Vim快速合并行及vim 将文件所有行合并到一行
Nov 27 Javascript
Vue.js做select下拉列表的实例(ul-li标签仿select标签)
Mar 02 Javascript
详解vue-loader在项目中是如何配置的
Jun 04 Javascript
微信小程序实现简单跑马灯效果
May 26 Javascript
使用vuex较为优雅的实现一个购物车功能的示例代码
Dec 09 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
访问编码后的中文URL返回404错误的解决方法
2014/08/20 PHP
PHP连接MSSQL时nvarchar字段长度被截断为255的解决方法
2014/12/25 PHP
Laravel框架控制器的request与response用法示例
2019/09/30 PHP
关于Yii2框架跑脚本时内存泄漏问题的分析与解决
2019/12/01 PHP
php加速缓存器opcache,apc,xcache,eAccelerator原理与配置方法实例分析
2020/03/02 PHP
js apply/call/caller/callee/bind使用方法与区别分析
2009/10/28 Javascript
javascript Math.random()随机数函数
2009/11/04 Javascript
老鱼 浅谈javascript面向对象编程
2010/03/04 Javascript
基于jquery的图片的切换(以数字的形式)
2011/02/14 Javascript
javascript的原生方法获取数组中的最大(最小)值
2012/12/19 Javascript
JQuery实现表格动态增加行并对新行添加事件
2014/07/30 Javascript
判断window.onload是否多次使用的方法
2014/09/21 Javascript
Jquery设置attr的disabled属性控制某行显示或者隐藏
2014/09/25 Javascript
jQuery中document与window以及load与ready 区别详解
2014/12/29 Javascript
浅析AngularJS中的生命周期和延迟处理
2015/06/18 Javascript
AngularJS监听路由变化的方法
2017/03/07 Javascript
详解Angular4中路由Router类的跳转navigate
2017/06/09 Javascript
Vant 中的Toast设置全局的延迟时间操作
2020/11/04 Javascript
json.stringify()与json.parse()的区别以及用处
2021/01/25 Javascript
Python实现提取文章摘要的方法
2015/04/21 Python
pygame游戏之旅 按钮上添加文字的方法
2018/11/21 Python
解决PyCharm不运行脚本,而是运行单元测试的问题
2019/01/17 Python
Python向excel中写入数据的方法
2019/05/05 Python
Django框架创建mysql连接与使用示例
2019/07/29 Python
python 使用socket传输图片视频等文件的实现方式
2019/08/07 Python
Python中的整除和取模实例
2020/06/03 Python
python 制作网站筛选工具(附源码)
2021/01/21 Python
AT&T Wireless:手机、无限数据计划和配件
2018/06/03 全球购物
人力资源部副职的竞聘演讲稿
2014/01/07 职场文书
挖掘机司机岗位职责
2014/02/12 职场文书
《台湾的蝴蝶谷》教学反思
2014/02/20 职场文书
5.12护士节活动总结
2015/02/10 职场文书
最感人的道歉情书
2015/05/12 职场文书
乔布斯辞职信(中英文对照)
2015/05/12 职场文书
2015年高三毕业班班主任工作总结
2015/10/22 职场文书
Win11怎么跳过联网验机 ?Win11跳过联网验机激活教程
2022/04/05 数码科技