模拟时钟
利用canvas绘制时钟,实现模拟时钟的功能,钟表时间与系统时间保持一致,刻度将24小时制转换为12小时制,需要分别绘图出中心圆、外层大圆、分针、时针、秒针。
效果图如下:
代码如下:
index.wxml
<canvas canvas-id="myCanvas" class="mycanvas"></canvas>
index.wxss
/**index.wxss**/
.mycanvas {
width: 100%;
height: 100%;
position: fixed;
}
index.js
Page({
width: 0, //窗口宽度
height: 0, //窗口高度
onLoad: function () {
// 获取系统信息
wx.getSystemInfo({
// 获取系统信息成功,保存获取到的系统窗口的宽高
success: res => {
// console.log(res)
this.width = res.windowWidth
this.height = res.windowHeight
}
})
},
timer: null, //定时器
onReady: function(){
//创建ctx实例
var ctx = wx.createCanvasContext('myCanvas')
//将角度转换为弧度,方便在后面使用
//计算公式:弧度 = 角度*Math.PI / 180
const D6 = 6 * Math.PI / 180
const D30 = 30 * Math.PI / 180
const D90 = 90 * Math.PI /