|
|
// pages/index/index.js
|
|
|
Page({
|
|
|
|
|
|
/**
|
|
|
* 页面的初始数据
|
|
|
*/
|
|
|
|
|
|
width: 0,
|
|
|
height: 0,
|
|
|
|
|
|
data: {
|
|
|
|
|
|
},
|
|
|
|
|
|
/**
|
|
|
* 生命周期函数--监听页面加载
|
|
|
*/
|
|
|
onLoad: function() {
|
|
|
//获取系统信息
|
|
|
wx.getSystemInfo({
|
|
|
//获取系统信息成功，保存获取到的系统窗口的宽高
|
|
|
success: 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 /180
|
|
|
//获取宽和高值
|
|
|
var width = this.width, height = this.height
|
|
|
//计算表盘半径，留出30px外边框
|
|
|
var radious = width / 2 - 30
|
|
|
//每秒绘制一次
|
|
|
draw()
|
|
|
this.timer = setInterval(draw, 1000)
|
|
|
//绘制函数
|
|
|
function draw() {
|
|
|
//设置坐标轴原点为窗口的中心点
|
|
|
ctx.translate(width / 2, height / 2)
|
|
|
//绘制表盘
|
|
|
drawClock(ctx, radious)
|
|
|
// 绘制指针
|
|
|
drawHand(ctx, radious)
|
|
|
// 绘制执行
|
|
|
ctx.draw()
|
|
|
}
|
|
|
//绘制表盘部分
|
|
|
function drawClock(ctx, radious) {
|
|
|
}
|
|
|
// 绘制指针部分
|
|
|
function drawhand(ctx, radious) {
|
|
|
}
|
|
|
function drawClock(ctx, radious) {
|
|
|
// 绘制大圆
|
|
|
// 大圆的半径为radious，线条粗细为2px
|
|
|
ctx.setLineWidth(2)
|
|
|
ctx.beginPath()
|
|
|
ctx.arc(0, 0, radious, 0, 2 * Math.PI, true)
|
|
|
ctx.stroke()
|
|
|
// 绘制中心圆
|
|
|
// 中心圆的半径为8px， 线条粗细为1px
|
|
|
ctx.setLineWidth(1)
|
|
|
ctx.beginPath()
|
|
|
ctx.arc(0, 0, 8, 0, 2 * Math.PI, true)
|
|
|
ctx.stroke()
|
|
|
// 绘制大刻度盘，线条粗细为5px
|
|
|
ctx.setLineWidth(5)
|
|
|
for (var i = 0; i < 12; i++) {
|
|
|
// 以原点为中心顺时针旋转（多次调用旋转的角度会叠加）
|
|
|
// 大刻度盘需要绘制12个线条，表示12个小时，每次旋转30度
|
|
|
ctx.rotate(D30)
|
|
|
ctx.beginPath()
|
|
|
ctx.moveTo(radious, 0)
|
|
|
ctx.lineTo(radious - 15, 0)
|
|
|
ctx.stroke()
|
|
|
}
|
|
|
// 绘制小刻度盘，线条粗细为1px
|
|
|
ctx.setLineWidth(1)
|
|
|
for (var i = 0; i < 60; i++) {
|
|
|
// 小刻度盘需要绘制60个线条，表示60分钟或60秒，每次旋转6度
|
|
|
ctx.rotate(D6)
|
|
|
ctx.beginPath()
|
|
|
ctx.moveTo(radious, 0)
|
|
|
ctx.lineTo(radious - 10, 0)
|
|
|
ctx.stroke()
|
|
|
}
|
|
|
// 绘制文本
|
|
|
ctx.setFontSize(20)
|
|
|
ctx.textBaseline = 'middle'
|
|
|
// 计算文本距离表盘中心的半径r
|
|
|
var r = radious - 30
|
|
|
for(var i = 1; i <= 12; ++i) {
|
|
|
// 利用三角函数计算文本坐标
|
|
|
var x = r * Math.cos(D30 * i - D90)
|
|
|
var y = r * Math.sin(D30 * i - D90)
|
|
|
if (i > 10) {
|
|
|
// 调整11和12的位置
|
|
|
// 在画布上绘制文本fillText（文本，左上角x坐标，左上角y坐标
|
|
|
ctx.fillText(i, x - 12, y)
|
|
|
}else {
|
|
|
ctx.fillText(i, x - 6, y)
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
function drawHand(ctx, tadious) {
|
|
|
var t = new Date()
|
|
|
var h = t.getHours()
|
|
|
var m = t.getMinutes()
|
|
|
var s = t.getSeconds()
|
|
|
h = h > 12 ? h - 12 : h
|
|
|
// 时间从3点开始，逆时针旋转90度，指向12点
|
|
|
ctx.rotate(-D90)
|
|
|
// 绘制时针
|
|
|
ctx.save()
|
|
|
// 计算时针指向的刻度
|
|
|
// 通过30度*h可以计算每个整点的旋转角度
|
|
|
// 如果时间不是整点，需要使用h + m/60+s/3600计算准确的偏移度
|
|
|
ctx.rotate(D30 * (h + m / 60 + s /3600))
|
|
|
ctx.setLineWidth(6)
|
|
|
ctx.beginPath()
|
|
|
ctx.moveTo(-20, 0)
|
|
|
ctx.lineTo(radious / 2.6, 0)
|
|
|
ctx.stroke()
|
|
|
ctx.restore()
|
|
|
// 绘制分针
|
|
|
ctx.save()
|
|
|
ctx.rotate(D6 * (m + s / 60))
|
|
|
ctx.setLineWidth(4)
|
|
|
ctx.beginPath()
|
|
|
ctx.moveTo(-20, 0)
|
|
|
ctx.lineTo(radious / 1.8, 0)
|
|
|
ctx.stroke()
|
|
|
ctx.restore()
|
|
|
// 绘制秒针
|
|
|
ctx.save()
|
|
|
ctx.rotate(D6 * s)
|
|
|
ctx.setLineWidth(2)
|
|
|
ctx.beginPath()
|
|
|
ctx.moveTo(-20, 0)
|
|
|
ctx.lineTo(radious / 1.6, 0)
|
|
|
ctx.stroke()
|
|
|
ctx.restore()
|
|
|
}
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
* 生命周期函数--监听页面显示
|
|
|
*/
|
|
|
onShow() {
|
|
|
|
|
|
},
|
|
|
|
|
|
/**
|
|
|
* 生命周期函数--监听页面隐藏
|
|
|
*/
|
|
|
onHide() {
|
|
|
|
|
|
},
|
|
|
|
|
|
/**
|
|
|
* 生命周期函数--监听页面卸载
|
|
|
*/
|
|
|
onUnload() {
|
|
|
|
|
|
},
|
|
|
|
|
|
/**
|
|
|
* 页面相关事件处理函数--监听用户下拉动作
|
|
|
*/
|
|
|
onPullDownRefresh() {
|
|
|
|
|
|
},
|
|
|
|
|
|
/**
|
|
|
* 页面上拉触底事件的处理函数
|
|
|
*/
|
|
|
onReachBottom() {
|
|
|
|
|
|
},
|
|
|
|
|
|
/**
|
|
|
* 用户点击右上角分享
|
|
|
*/
|
|
|
onShareAppMessage() {
|
|
|
|
|
|
}
|
|
|
}) |
