更新时间:2020年10月22日 15:29:43 作者:把你打的喵喵叫
这篇文章主要为大家详细介绍了微信小程序canvas动态时钟,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了微信小程序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
//获取系统信息
({
//获取系统信息成功,将系统窗口的宽高赋给页面的宽高
success: function (res) {
that.width =
that.height = res.windowHeight
that.setData({
canvasWidth: * * ,
canvasHeight: * * * 819,
rightWidth: * *
})
}
})
},
onReady: function () {
();
// 每40ms执行一次drawClock(),
this.interval = setInterval(, 40);
},
// 所有的canvas属性以及()等涉及角度的参数都是用弧度表示
// 时钟
drawClock: function () {
let _this = this;
const ctx = ('clock');
var height = this.height;
var width = this.width;
// 设置文字对应的半径
var R = this.data.canvasWidth / 5;
();
// 把原点的位置移动到屏幕中间,及宽的一半,高的一半
(this.data.canvasWidth / 1.83, this.data.canvasHeight / 1.83);
// 画外框
function drawBackground() {
('#4BB5C3');
// 设置线条的粗细,单位px
(8);
// 开始路径
();
// 运动一个圆的路径
// arc(x,y,半径,起始位置,结束位置,false为顺时针运动)
(0, 0, R * 1.7, 0, 2 * Math.PI, false);
();
// 描出点的路径
();
};
// 画时钟数
function drawHoursNum() {
(20);
// 圆的起始位置是从3开始的,所以我们从3开始填充数字
var hours = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2];
(function (hour, i) {
var rad = (2 * Math.PI / 12) * i;
var x = R * (rad);
var y = R * (rad);
if (hour == 12) {
(hour, x - 11, y + 6);
} else if (hour == 6) {
(hour, x - 5, y + 10);
} else if (hour == 3) {
(hour, x, y + 8);
} else if (hour == 9) {
(hour, x - 10, y + 8);
}
else {
//(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) * (rad);
var y = (R + 15) * (rad);
();
// 每5个点一个比较大
if (i % 5 == 0) {
(x, y, 2, 0, 2 * Math.PI, false);
} else {
// (x, y, 1, 0, 2 * Math.PI, false);
}
('black');
();
}
();
}
// 画时针
function drawHour(hour, minute) {
('#000000');
// 保存画之前的状态
();
();
// 根据小时数确定大的偏移
var rad = 2 * Math.PI / 12 * hour;
// 根据分钟数确定小的偏移
var mrad = 2 * Math.PI / 12 / 60 * minute;
// 做旋转
(rad + mrad);
(4);
// 设置线条结束样式为圆
('round');
// 时针向后延伸8个px;
(0, 8);
// 一开始的位置指向12点的方向,长度为R/2
(0, -R / 2);
();
();
// 返回画之前的状态
();
}
// 画分针
function drawMinute(minute, second) {
();
();
// 根据分钟数确定大的偏移
var rad = 2 * Math.PI / 60 * minute;
// 根据秒数确定小的偏移
var mrad = 2 * Math.PI / 60 / 60 * second;
(rad + mrad);
// 分针比时针细
(3);
('round');
(0, 10);
// 一开始的位置指向12点的方向,长度为3 * R / 4
(0, -3 * R / 4);
();
();
();
}
// 画秒针
function drawSecond(second, msecond) {
();
();
// 根据秒数确定大的偏移
var rad = 2 * Math.PI / 60 * second;
// 1000ms=1s所以这里多除个1000
var mrad = 2 * Math.PI / 60 / 1000 * msecond;
(rad + mrad);
(2);
('#4BB5C3');
('round');
(0, 12);
(0, -R);
();
();
();
}
//画出中间那个灰色的圆
function drawDot() {
();
(0, 0, 4, 0, 2 * Math.PI, false);
('#FFF9E6');
(6);
('#000000');
();
();
();
}
//画蒙层
function drawMask() {
();
(0, 0, width * 0.5, _this.data.canvasHeight);
('rgba(0,0,0,.2)')
()
}
function Clock() {
// 实时获取各个参数
var now = new Date();
var hour = ();
var minute = ()
var second = ();
var msecond = ();
if () {
(8,8)
}
// 依次执行各个方法
drawBackground();
drawHoursNum();
drawdots();
drawSecond(second, msecond);
drawHour(hour, minute);
drawMinute(minute, second);
drawDot();
if () {
drawMask();
}
();
}
Clock();
},
goCountdown() {
let _this = this;
({
showMask: true
})
setTimeout(function () {
({
showMask: false
})
({
url: '/pages/countdown/countdown',
})
}, 200)
},
touchstart: function (e) {
(e)
({
showMask: true
})
},
touchend: function (e) {
({
showMask: false
})
}
})
为大家推荐现在关注度比较高的微信小程序教程一篇:《微信小程序开发教程》小编为大家精心整理的,希望喜欢。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。