微信小程序|動態(tài)時鐘
問題描述
近期，網(wǎng)絡(luò)上流行了一個“時間管理”的梗，想要做好時間管理，清楚把握時間才是關(guān)鍵點(diǎn)，那么借著這個“時間管理”，來介紹一個小程序?qū)崿F(xiàn)動態(tài)時鐘的案例吧。
效果圖：
圖2.1 動態(tài)時鐘
解決方案
1、wxml
wxml代碼十分簡單，只需要一個canvas組件便能實(shí)現(xiàn)一個時鐘外圓形狀。
|
<canvas canvas-id='myCanvas'></canvas> |
2、js
js部分主要針對于Math相關(guān)屬性的應(yīng)用。
（1）指針的配置：
指針都要對運(yùn)動路徑進(jìn)行適當(dāng)?shù)脑O(shè)置，需要利用Math.PI屬性來對不同指針轉(zhuǎn)動角度進(jìn)行配置。比如，秒針轉(zhuǎn)動角度Math.PI/30表示將整個圓(360°)平分為60份，即一秒轉(zhuǎn)過6°；分針、時針的計(jì)算同理。指針轉(zhuǎn)動到某個點(diǎn)，存在一個坐標(biāo)，坐標(biāo)的計(jì)算需要利用Math.sin、Math.cos屬。
（2）方法為：假設(shè)圓心坐標(biāo)為(a,b)，則x=a + Math.sin(angle * (Math.PI / 180)) * r ；y=b -Math.cos(angle * (Math.PI / 180)) * r 。
（3）表盤、數(shù)字點(diǎn)：arc(x,y,半徑,起始位置，結(jié)束位置)
3、代碼示例：
（1）先定義將要直接執(zhí)行的幾個函數(shù)
|
onShow: function (e) { setInterval(show, 1000); //每秒執(zhí)行1次 function show() { secshow() //秒針 minshow() //分針 houshow() //時針 backshow() //表盤 numbershow() //數(shù)字 ctx.draw() } }, |
（2）秒針
|
function secshow() { var now = new Date() var sec = now.getSeconds() //角度弧度 var angle = sec * Math.PI / 30 var x = 100 * Math.sin(angle) + 150 var y = 150 - 100 * Math.cos(angle) ctx.beginPath() #開始路徑 ctx.setLineWidth(5) //線條粗細(xì) ctx.setStrokeStyle('black') ctx.moveTo(150, 150) ctx.lineTo(x, y) //指針指向 ctx.closePath() //返回初始狀態(tài) ctx.stroke() //描出點(diǎn)的路徑 } |
（3）分針
|
function minshow() { var now = new Date() var min = now.getMinutes() var sec = now.getSeconds() var angle = (min + sec / 60) * Math.PI / 30 var x = 80 * Math.sin(angle) + 150 var y = 150 - 80 * Math.cos(angle) ctx.beginPath() ctx.setLineWidth(5) ctx.setStrokeStyle('black') ctx.moveTo(150, 150) ctx.lineTo(x, y) ctx.closePath() ctx.stroke() } |
（4）時針
|
function houshow() { var now = new Date() var hou = now.getHours() hou = hou % 12 //24小時制，取余數(shù) var min = now.getMinutes() var sec = now.getSeconds() var angle = (hou + min / 60 + sec / 3600) * Math.PI / 6 var x = 50 * Math.sin(angle) + 150 var y = 150 - 50 * Math.cos(angle) ctx.beginPath() ctx.setLineWidth(8) ctx.moveTo(150, 150) ctx.lineTo(x, y) ctx.closePath() ctx.stroke() } |
(5)表盤及數(shù)字點(diǎn)
|
function backshow() { ctx.beginPath() ctx.setLineWidth(3) ctx.arc(150, 150, 110, 0, 2 * Math.PI) ctx.closePath() ctx.stroke() }
function numbershow() { ctx.beginPath() ctx.setFontSize(20) for (var i = 1; i < 13; i++) { var angle = i * Math.PI / 6 var x = 100 * Math.sin(angle) + 145 var y = 158 - 100 * Math.cos(angle) ctx.fillText(i, x, y) } } |
