本文实例为大家分享了微信小程序canvas动态时钟的具体代码，供大家参考，具体内容如下
canvas时钟效果图：
代码：
wxml:
<view style='width:100%;height:{{canvasheight}}px' catchtap='gocountdown'catchlongtap='touchstart' catchtouchend='touchend'>
<canvas canvas-id='clock' style='width:100%;height:{{canvasheight}}px'></canvas>
</view>
js:
page({
data: {
width: 0,
height: 0,
showmask: false
},
onload: function (options) {
var that = this
//获取系统信息
wx.getsysteminfo({
//获取系统信息成功，将系统窗口的宽高赋给页面的宽高
success: function (res) {
that.width = res.windowwidth
that.height = res.windowheight
that.setdata({
canvaswidth: res.windowwidth * 0.9 * 0.52,
canvasheight: res.windowwidth * 0.9 * 0.52 * 0.9819,
rightwidth: res.windowwidth * 0.9 * 0.47
})
}
})
},
onready: function () {
this.drawclock();
// 每40ms执行一次drawclock()，
this.interval = setinterval(this.drawclock, 40);
},
// 所有的canvas属性以及math.sin,math.cos()等涉及角度的参数都是用弧度表示
// 时钟
drawclock: function () {
let _this = this;
const ctx = wx.createcanvascontext('clock');
var height = this.height;
var width = this.width;
// 设置文字对应的半径
var r = this.data.canvaswidth / 5;
ctx.save();
// 把原点的位置移动到屏幕中间，及宽的一半，高的一半
ctx.translate(this.data.canvaswidth / 1.83, this.data.canvasheight / 1.83);
// 画外框
function drawbackground() {
ctx.setstrokestyle('#4bb5c3');
// 设置线条的粗细，单位px
ctx.setlinewidth(8);
// 开始路径
ctx.beginpath();
// 运动一个圆的路径
// arc(x,y,半径,起始位置，结束位置，false为顺时针运动)
ctx.arc(0, 0, r * 1.7, 0, 2 * math.pi, false);
ctx.closepath();
// 描出点的路径
ctx.stroke();
};
// 画时钟数
function drawhoursnum() {
ctx.setfontsize(20);
// 圆的起始位置是从3开始的，所以我们从3开始填充数字
var hours = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2];
hours.foreach(function (hour, i) {
var rad = (2 * math.pi / 12) * i;
var x = r * math.cos(rad);
var y = r * math.sin(rad);
if (hour == 12) {
ctx.filltext(hour, x - 11, y + 6);
} else if (hour == 6) {
ctx.filltext(hour, x - 5, y + 10);
} else if (hour == 3) {
ctx.filltext(hour, x, y + 8);
} else if (hour == 9) {
ctx.filltext(hour, x - 10, y + 8);
}
else {
//ctx.filltext(hour, x - 6, y + 6);
}
})
};
// 画数字对应的点
function drawdots() {
for (let i = 0; i < 60; i++) {
var rad = 2 * math.pi / 60 * i;
var x = (r + 15) * math.cos(rad);
var y = (r + 15) * math.sin(rad);
ctx.beginpath();
// 每5个点一个比较大
if (i % 5 == 0) {
ctx.arc(x, y, 2, 0, 2 * math.pi, false);
} else {
// ctx.arc(x, y, 1, 0, 2 * math.pi, false);
}
ctx.setfillstyle('black');
ctx.fill();
}
ctx.closepath();
}
// 画时针
function drawhour(hour, minute) {
ctx.setstrokestyle('#000000');
// 保存画之前的状态
ctx.save();
ctx.beginpath();
// 根据小时数确定大的偏移
var rad = 2 * math.pi / 12 * hour;
// 根据分钟数确定小的偏移
var mrad = 2 * math.pi / 12 / 60 * minute;
// 做旋转
ctx.rotate(rad + mrad);
ctx.setlinewidth(4);
// 设置线条结束样式为圆
ctx.setlinecap('round');
// 时针向后延伸8个px；
ctx.moveto(0, 8);
// 一开始的位置指向12点的方向，长度为r/2
ctx.lineto(0, -r / 2);
ctx.stroke();
ctx.closepath();
// 返回画之前的状态
ctx.restore();
}
// 画分针
function drawminute(minute, second) {
ctx.save();
ctx.beginpath();
// 根据分钟数确定大的偏移
var rad = 2 * math.pi / 60 * minute;
// 根据秒数确定小的偏移
var mrad = 2 * math.pi / 60 / 60 * second;
ctx.rotate(rad + mrad);
// 分针比时针细
ctx.setlinewidth(3);
ctx.setlinecap('round');
ctx.moveto(0, 10);
// 一开始的位置指向12点的方向，长度为3 * r / 4
ctx.lineto(0, -3 * r / 4);
ctx.stroke();
ctx.closepath();
ctx.restore();
}
// 画秒针
function drawsecond(second, msecond) {
ctx.save();
ctx.beginpath();
// 根据秒数确定大的偏移
var rad = 2 * math.pi / 60 * second;
// 1000ms=1s所以这里多除个1000
var mrad = 2 * math.pi / 60 / 1000 * msecond;
ctx.rotate(rad + mrad);
ctx.setlinewidth(2);
ctx.setstrokestyle('#4bb5c3');
ctx.setlinecap('round');
ctx.moveto(0, 12);
ctx.lineto(0, -r);
ctx.stroke();
ctx.closepath();
ctx.restore();
}
//画出中间那个灰色的圆
function drawdot() {
ctx.beginpath();
ctx.arc(0, 0, 4, 0, 2 * math.pi, false);
ctx.setfillstyle('#fff9e6');
ctx.setlinewidth(6);
ctx.setstrokestyle('#000000');
ctx.stroke();
ctx.fill();
ctx.closepath();
}
//画蒙层
function drawmask() {
ctx.restore();
ctx.rect(0, 0, width * 0.5, _this.data.canvasheight);
ctx.setfillstyle('rgba(0,0,0,.2)')
ctx.fill()
}
function clock() {
// 实时获取各个参数
var now = new date();
var hour = now.gethours();
var minute = now.getminutes()
var second = now.getseconds();
var msecond = now.getmilliseconds();
if (_this.data.showmask) {
ctx.scale(0.98,0.98)
}
// 依次执行各个方法
drawbackground();
drawhoursnum();
drawdots();
drawsecond(second, msecond);
drawhour(hour, minute);
drawminute(minute, second);
drawdot();
if (_this.data.showmask) {
drawmask();
}
ctx.draw();
}
clock();
},
gocountdown() {
let _this = this;
_this.setdata({
showmask: true
})
settimeout(function () {
_this.setdata({
showmask: false
})
wx.navigateto({
url: '/pages/countdown/countdown',
})
}, 200)
},
touchstart: function (e) {
console.log(e)
this.setdata({
showmask: true
})
},
touchend: function (e) {
this.setdata({
showmask: false
})
}
})
为大家推荐现在关注度比较高的微信小程序教程一篇：《微信小程序开发教程》www.887551.com为大家精心整理的，希望喜欢。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持www.887551.com。