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


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中的相等与不等运算
Apr 25 Javascript
当jQuery遭遇CoffeeScript的时候 使用分享
Sep 17 Javascript
一个简单的JS鼠标悬停特效具体方法
Jun 17 Javascript
jQuery与getJson结合的用法实例
Aug 07 Javascript
使用Bootstrap框架制作查询页面的界面实例代码
May 27 Javascript
Bootstrap中的表单验证插件bootstrapValidator使用方法整理(推荐)
Jun 21 Javascript
JavaScript每天必学之事件
Sep 18 Javascript
bootstrap table小案例
Oct 21 Javascript
解决循环中setTimeout执行顺序的问题
Jun 20 Javascript
JavaScript判断浏览器运行环境的详细方法
Jun 30 Javascript
微信小程序npm引入vant-weapp的踩坑记录
Aug 01 Javascript
vue+elementUI中表格高亮或字体颜色改变操作
Nov 02 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多线程抓取网页实现代码
2010/07/22 PHP
PHP面试常用算法(推荐)
2016/07/22 PHP
php基于闭包实现函数的自调用(递归)实例分析
2016/11/11 PHP
Yii2――使用数据库操作汇总(增删查改、事务)
2016/12/19 PHP
Thinkphp5 如何隐藏入口文件index.php(URL重写)
2019/10/16 PHP
使用Modello编写JavaScript类
2006/12/22 Javascript
ie focus bug 解决方法
2009/09/03 Javascript
学习JavaScript的最佳方法分享
2011/10/21 Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(上)
2015/10/28 Javascript
Jquery使用小技巧汇总
2015/12/29 Javascript
JS获取复选框的值,并传递到后台的实现方法
2016/05/30 Javascript
Bootstrap导航条可点击和鼠标悬停显示下拉菜单的实现代码
2016/06/23 Javascript
更靠谱的H5横竖屏检测方法(js代码)
2016/09/13 Javascript
JavaScript中清空数组的方法总结
2016/12/02 Javascript
js实现的简练高效拖拽功能示例
2016/12/21 Javascript
详解一个基于react+webpack的多页面应用配置
2019/01/21 Javascript
如何实现小程序tab栏下划线动画效果
2019/05/18 Javascript
Bootstrap 时间日历插件bootstrap-datetimepicker配置与应用小结
2019/05/28 Javascript
node.js express框架简介与实现
2019/07/23 Javascript
Nodejs libuv运行原理详解
2019/08/21 NodeJs
jQuery实现移动端笔触canvas电子签名
2020/05/21 jQuery
基于javascript原生判断DOM是否加载完毕
2020/10/14 Javascript
在Python中处理字符串之isdecimal()方法的使用
2015/05/20 Python
Python用csv写入文件_消除空余行的方法
2018/07/06 Python
Python获取、格式化当前时间日期的方法
2020/02/10 Python
Python爬取365好书中小说代码实例
2020/02/28 Python
python如何使用腾讯云发送短信
2020/09/17 Python
深入浅析CSS3中的Flex布局整理
2020/04/27 HTML / CSS
Currentbody美国/加拿大:美容仪专家
2020/03/09 全球购物
某公司Java工程师面试题笔试题
2016/03/27 面试题
教育实习生的自我评价分享
2013/11/21 职场文书
企业党建工作汇报材料
2014/08/19 职场文书
企业党的群众路线教育实践活动学习心得体会
2014/10/31 职场文书
工作会议通知
2015/04/15 职场文书
公司职员入党自传书
2015/06/26 职场文书
js实现模拟购物商城案例
2021/05/18 Javascript