JS繪制微信小程序畫布時(shí)鐘
微信小程序官方組件也提供了畫布功能,下面分享一下如何創(chuàng)建微信小程序畫布時(shí)鐘。
總體思路是對(duì)pages中的一個(gè)小程序頁(yè)面構(gòu)建畫布時(shí)鐘邏輯程序,通過app.json公共設(shè)置來配置入口。
首先來看一下構(gòu)建這樣一個(gè)小程序所需要的目錄結(jié)構(gòu)
從目錄結(jié)構(gòu)就可以看出來這個(gè)程序是簡(jiǎn)單的單層頁(yè)面,畫布渲染在pages下面的index頁(yè)面上。
其中對(duì)程序有實(shí)際驅(qū)動(dòng)作用的代碼分別在index.js,index.wxml,index.wxss和app.json
這幾個(gè)文件中
Index.js文件里面存放著程序的邏輯層數(shù)據(jù),是程序的核心。
1)考慮到適應(yīng)不同的手機(jī)大小,定義了兩個(gè)變量width和height,當(dāng)頁(yè)面加載時(shí)(onLoad)獲取系統(tǒng)窗口的值作為index頁(yè)面的大?。?/p>
2)頁(yè)面初次渲染后給index添加時(shí)鐘函數(shù)canvasClock()
,并設(shè)置定時(shí)器,每一秒刷新一次畫布,呈現(xiàn)出時(shí)鐘運(yùn)動(dòng)的效果
3)在時(shí)鐘函數(shù)canvasClock()
中進(jìn)行繪制時(shí)鐘頁(yè)面所需的元素以其其運(yùn)動(dòng)函數(shù),并對(duì)其進(jìn)行調(diào)用drawClock(),通過調(diào)用小程序wx.drawCanvas
方法來指定index為繪制頁(yè)面和繪制行為
4)當(dāng)程序退出時(shí),清除計(jì)時(shí)器
代碼如下:
// 獲取應(yīng)用實(shí)例 Page({ data:{ width:0, height:0 }, //onLoad生命周期函數(shù),監(jiān)聽頁(yè)面加載 onLoad: function(){ //將全局變量Index保存在that中,里面函數(shù)調(diào)用 var that = this //獲取系統(tǒng)信息 wx.getSystemInfo({ //獲取系統(tǒng)信息成功,將系統(tǒng)窗口的寬高賦給頁(yè)面的寬高 success: function(res) { that.width = res.windowWidth that.height = res.windowHeight } }) }, //onReady生命周期函數(shù),監(jiān)聽頁(yè)面初次渲染完成 onReady: function(){ //調(diào)用canvasClock函數(shù) this.canvasClock() //對(duì)canvasClock函數(shù)循環(huán)調(diào)用 this.interval = setInterval(this.canvasClock,1000) }, canvasClock: function(){ var context = wx.createContext()//創(chuàng)建并返回繪圖上下文(獲取畫筆) //設(shè)置寬高 var width = this.width var height = this.height var R = width/2-55;//設(shè)置文字距離時(shí)鐘中心點(diǎn)距離 //重置畫布函數(shù) function reSet(){ context.height = context.height;//每次清除畫布,然后變化后的時(shí)間補(bǔ)上 context.translate(width/2, height/2);//設(shè)置坐標(biāo)軸原點(diǎn) context.save();//保存中點(diǎn)坐標(biāo)1 } //繪制中心圓和外面大圓 function circle(){ //外面大圓 context.setLineWidth(2); context.beginPath(); context.arc(0, 0, width/2-30, 0, 2 * Math.PI,true); context.closePath(); context.stroke(); //中心圓 context.beginPath(); context.arc(0, 0, 8, 0, 2 * Math.PI, true); context.closePath(); context.stroke(); } //繪制字體 function num(){ // var R = width/2-60;//設(shè)置文字距離時(shí)鐘中心點(diǎn)距離 context.setFontSize(20)//設(shè)置字體樣式 context.textBaseline = "middle";//字體上下居中,繪制時(shí)間 for(var i = 1; i < 13; i++) { //利用三角函數(shù)計(jì)算字體坐標(biāo)表達(dá)式 var x = R * Math.cos(i * Math.PI / 6 - Math.PI / 2); var y = R * Math.sin(i * Math.PI / 6 - Math.PI / 2); if(i==11||i==12){//調(diào)整數(shù)字11和12的位置 context.fillText(i, x-12, y+9); }else { context.fillText(i, x-6, y+9); } } } //繪制小格 function smallGrid(){ context.setLineWidth(1); context.rotate(-Math.PI/2);//時(shí)間從3點(diǎn)開始,倒轉(zhuǎn)90度 for(var i = 0; i < 60; i++) { context.beginPath(); context.rotate(Math.PI / 30); context.moveTo(width/2-30, 0); context.lineTo(width/2-40, 0); context.stroke(); } } //繪制大格 function bigGrid(){ context.setLineWidth(5); for(var i = 0; i < 12; i++) { context.beginPath(); context.rotate(Math.PI / 6); context.moveTo(width/2-30, 0); context.lineTo(width/2-45, 0); context.stroke(); } } //指針運(yùn)動(dòng)函數(shù) function move(){ var t = new Date();//獲取當(dāng)前時(shí)間 var h = t.getHours();//獲取小時(shí) h = h>12?(h-12):h;//將24小時(shí)制轉(zhuǎn)化為12小時(shí)制 var m = t.getMinutes();//獲取分針 var s = t.getSeconds();//獲取秒針 context.save();//再次保存2 context.setLineWidth(7); //旋轉(zhuǎn)角度=30度*(h+m/60+s/3600) //分針旋轉(zhuǎn)角度=6度*(m+s/60) //秒針旋轉(zhuǎn)角度=6度*s context.beginPath(); //繪制時(shí)針 context.rotate((Math.PI/6)*(h+m/60+s/3600)); context.moveTo(-20,0); context.lineTo(width/4.5-20,0); context.stroke(); context.restore();//恢復(fù)到2,(最初未旋轉(zhuǎn)狀態(tài))避免旋轉(zhuǎn)疊加 context.save();//3 //畫分針 context.setLineWidth(5); context.beginPath(); context.rotate((Math.PI/30)*(m+s/60)); context.moveTo(-20,0); context.lineTo(width/3.5-20,0); context.stroke(); context.restore();//恢復(fù)到3,(最初未旋轉(zhuǎn)狀態(tài))避免旋轉(zhuǎn)疊加 context.save(); //繪制秒針 context.setLineWidth(2); context.beginPath(); context.rotate((Math.PI/30)*s); context.moveTo(-20,0); context.lineTo(width/3-20,0); context.stroke(); } //調(diào)用 function drawClock(){ reSet(); circle(); num(); smallGrid(); bigGrid(); move(); } drawClock()//調(diào)用運(yùn)動(dòng)函數(shù) // 調(diào)用 wx.drawCanvas,通過 canvasId 指定在哪張畫布上繪制,通過 actions 指定繪制行為 wx.drawCanvas({ canvasId:'myCanvas', actions: context.getActions() }) }, //頁(yè)面卸載,清除畫布繪制計(jì)時(shí)器 onUnload:function(){ clearInterval(this.interval) } })
index.wxml中存放著canvas標(biāo)簽,并通過canvas-id和class指定了組件標(biāo)識(shí)符和樣式選擇器
<canvas canvas-id="myCanvas" class="canvas"></canvas>
index.wxss設(shè)置畫布樣式
.canvas{ width: 100%; height: 100%; position: fixed; }
app.json文件設(shè)置了頁(yè)面路徑和窗口表現(xiàn)
{ "pages": [ "pages/index" ], "window": { "navigationBarTextStyle": "light", "navigationBarTitleText": "畫布時(shí)鐘", "navigationBarBackgroundColor": "#000", "backgroundColor": "#fbf9fe" } }
這樣,整個(gè)微信小程序畫布時(shí)鐘就簡(jiǎn)單的創(chuàng)建完成,看一下效果
guthub下載地址:https://github.com/RidingACodeToStray/weCanvasClock.Git
以上所述是小編給大家介紹的JS繪制微信小程序畫布時(shí)鐘,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
javascript獲取鼠標(biāo)點(diǎn)擊元素對(duì)象(示例代碼)
本篇文章主要介紹了利用javascript獲取鼠標(biāo)點(diǎn)擊元素對(duì)象的示例代碼。需要的朋友可以過來參考下,希望對(duì)大家有所幫助2013-12-12js+數(shù)組實(shí)現(xiàn)網(wǎng)頁(yè)上顯示時(shí)間/星期幾的實(shí)用方法
在網(wǎng)頁(yè)上顯示時(shí)間(年月日/時(shí)分秒),很多新手朋友都想實(shí)現(xiàn)這樣的功能,本文整理了一些實(shí)用技巧,殺出來與大家分享,感興趣的朋友可以了解下2013-01-01JavaScript XML實(shí)現(xiàn)兩級(jí)級(jí)聯(lián)下拉列表
用xml作為存儲(chǔ)容器,不用數(shù)據(jù)庫(kù),速度和效率高些。2008-11-11JS利用時(shí)間戳倒計(jì)時(shí)的實(shí)現(xiàn)示例
這篇文章主要介紹了JS利用時(shí)間戳倒計(jì)時(shí)的實(shí)現(xiàn)示例,本文將提供代碼示例和詳細(xì)的步驟,幫助你實(shí)現(xiàn)一個(gè)簡(jiǎn)單而實(shí)用的時(shí)間戳倒計(jì)時(shí),感興趣的可以了解一下2023-12-12基于HTML+JavaScript實(shí)現(xiàn)中國(guó)象棋
這篇文章主要為大家詳細(xì)介紹了如何利用HTML+CSS+JS實(shí)現(xiàn)中國(guó)象棋游戲,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-08-08Echarts中X軸/Y軸坐標(biāo)標(biāo)簽顯示不下的問題解決
本文主要介紹了Echarts中X軸/Y軸坐標(biāo)標(biāo)簽顯示不下的問題解決,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-09-09