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


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 相关文章推荐
Jvascript学习实践案例(开发常用)
Jun 25 Javascript
让AJAX不依赖后端接口实现方案
Dec 03 Javascript
jQuery实现仿淘宝带有指示条的图片转动切换效果完整实例
Mar 04 Javascript
详细分析JavaScript变量类型
Jul 08 Javascript
jquery实现页面虚拟键盘特效
Aug 08 Javascript
jquery彩色投票进度条简单实例演示
Jul 23 Javascript
JavaScript从数组的indexOf()深入之Object的Property机制
May 11 Javascript
基于d3.js实现实时刷新的折线图
Aug 03 Javascript
原生js和css实现图片轮播效果
Feb 07 Javascript
基于JSONP原理解析(推荐)
Dec 04 Javascript
微信小程序实现星级评分和展示
Jul 05 Javascript
vue-router 控制路由权限的实现
Sep 24 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缓存设计实现代码
2011/09/30 PHP
gearman中任务的优先级和返回状态实例分析
2020/02/27 PHP
javascript右下角弹层及自动隐藏(自己编写)
2013/11/20 Javascript
使用GruntJS构建Web程序之安装篇
2014/06/04 Javascript
使用BootStrap实现用户登录界面UI
2016/08/10 Javascript
JavaScript数组去重由慢到快由繁到简(优化篇)
2016/08/26 Javascript
JavaScript利用闭包实现模块化
2017/01/13 Javascript
Bootstrap3 多个模态对话框无法显示的解决方案
2017/02/23 Javascript
async/await与promise(nodejs中的异步操作问题)
2017/03/03 NodeJs
JavaScript动态绑定详解
2017/09/14 Javascript
使用Vue自定义数字键盘组件(体验度极好)
2017/12/19 Javascript
AjaxUpLoad.js实现文件上传功能
2018/03/02 Javascript
vue cli使用融云实现聊天功能的实例代码
2019/04/19 Javascript
微信小程序用户授权,以及判断登录是否过期的方法
2019/05/10 Javascript
js核心基础之构造函数constructor用法实例分析
2019/05/11 Javascript
vue 页面跳转的实现方式
2021/01/12 Vue.js
js实现类选择器和name属性选择器的示例步骤
2021/02/07 Javascript
python基础教程之类class定义使用方法
2014/02/20 Python
Python图算法实例分析
2016/08/13 Python
django和vue实现数据交互的方法
2019/08/21 Python
Python根据服务获取端口号的方法
2019/09/25 Python
python对指定字符串逆序的6种方法(小结)
2020/04/02 Python
xadmin使用formfield_for_dbfield函数过滤下拉表单实例
2020/04/07 Python
django 连接数据库出现1045错误的解决方式
2020/05/14 Python
python 使用建议与技巧分享(四)
2020/08/18 Python
美国顶尖折扣时尚购物网:Bluefly
2016/08/28 全球购物
世界上最值得信赖的多日游在线市场:TourRadar
2018/07/20 全球购物
MyHeritage美国:家族史研究和DNA测试的领先服务
2019/05/27 全球购物
全球烹饪课程的领先预订平台:Cookly
2020/01/28 全球购物
歌唱比赛获奖感言
2014/01/21 职场文书
办公室员工岗位工作职责
2014/03/10 职场文书
艺术设计专业个人求职信
2014/04/10 职场文书
优秀应届本科生求职信
2014/07/19 职场文书
党支部对照检查材料
2014/08/25 职场文书
如何书写公司员工保密协议?
2019/06/27 职场文书
图解上海144收音机
2021/04/22 无线电