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

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

涉及内容：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"
}

运行截图：

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。