微信小程序入门案例——绘制时钟，供大家参考，具体内容如下
涉及内容：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"
}
运行截图：
为大家推荐现在关注度比较高的微信小程序教程一篇：《微信小程序开发教程》www.887551.com为大家精心整理的，希望喜欢。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持www.887551.com。