微信小程式入門之繪製時鐘

阿新 • • 發佈：2020-10-24

微信小程式入門案例——繪製時鐘，供大家參考，具體內容如下

涉及內容：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.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,10,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"
}

執行截圖：

微信小程式入門之繪製時鐘