JS绘制微信小程序画布时钟

微信小程序官方组件也提供了画布功能，下面分享一下如何创建微信小程序画布时钟。

总体思路是对pages中的一个小程序页面构建画布时钟逻辑程序，通过app.json公共设置来配置入口。

首先来看一下构建这样一个小程序所需要的目录结构

从目录结构就可以看出来这个程序是简单的单层页面，画布渲染在pages下面的index页面上。

其中对程序有实际驱动作用的代码分别在

index.js，index.wxml，index.wxss和app.json

这几个文件中

Index.js文件里面存放着程序的逻辑层数据，是程序的核心。

1）考虑到适应不同的手机大小，定义了两个变量width和height，当页面加载时（onLoad）获取系统窗口的值作为index页面的大小；

2）页面初次渲染后给index添加时钟函数

canvasClock（）

，并设置定时器，每一秒刷新一次画布，呈现出时钟运动的效果

3）在时钟函数

canvasClock（）

中进行绘制时钟页面所需的元素以其其运动函数，并对其进行调用drawClock()，通过调用小程序

wx.drawCanvas

方法来指定index为绘制页面和绘制行为

4）当程序退出时，清除计时器

代码如下：

// 获取应用实例
Page({
data:{
width:0,
height:0
},
//onLoad生命周期函数，监听页面加载
onLoad: function(){
//将全局变量Index保存在that中，里面函数调用
var that = this
//获取系统信息
wx.getSystemInfo({
//获取系统信息成功，将系统窗口的宽高赋给页面的宽高
success: function(res) {
that.width = res.windowWidth
that.height = res.windowHeight
}
})
},
//onReady生命周期函数，监听页面初次渲染完成
onReady: function(){
//调用canvasClock函数
this.canvasClock()
//对canvasClock函数循环调用
this.interval = setInterval(this.canvasClock,1000)
},
canvasClock: function(){
var context = wx.createContext()//创建并返回绘图上下文（获取画笔）
//设置宽高
var width = this.width
var height = this.height
var R = width/2-55;//设置文字距离时钟中心点距离
//重置画布函数
function reSet(){
context.height = context.height;//每次清除画布，然后变化后的时间补上
context.translate(width/2, height/2);//设置坐标轴原点
context.save();//保存中点坐标1
}
//绘制中心圆和外面大圆
function circle(){
//外面大圆
context.setLineWidth(2);
context.beginPath();
context.arc(0, 0, width/2-30, 0, 2 * Math.PI,true);
context.closePath();
context.stroke();
//中心圆
context.beginPath();
context.arc(0, 0, 8, 0, 2 * Math.PI, true);
context.closePath();
context.stroke();
}
//绘制字体
function num(){
// var R = width/2-60;//设置文字距离时钟中心点距离
context.setFontSize(20)//设置字体样式
context.textBaseline = "middle";//字体上下居中，绘制时间
for(var i = 1; i < 13; i++) {
//利用三角函数计算字体坐标表达式
var x = R * Math.cos(i * Math.PI / 6 - Math.PI / 2);
var y = R * Math.sin(i * Math.PI / 6 - Math.PI / 2);
if(i==11||i==12){//调整数字11和12的位置
context.fillText(i, x-12, y+9);
}else {
context.fillText(i, x-6, y+9);
}
}
}
//绘制小格
function smallGrid(){
context.setLineWidth(1);
context.rotate(-Math.PI/2);//时间从3点开始，倒转90度
for(var i = 0; i < 60; i++) {
context.beginPath();
context.rotate(Math.PI / 30);
context.moveTo(width/2-30, 0);
context.lineTo(width/2-40, 0);
context.stroke();
}
}
//绘制大格
function bigGrid(){
context.setLineWidth(5);
for(var i = 0; i < 12; i++) {
context.beginPath();
context.rotate(Math.PI / 6);
context.moveTo(width/2-30, 0);
context.lineTo(width/2-45, 0);
context.stroke();
}
}
//指针运动函数
function move(){
var t = new Date();//获取当前时间
var h = t.getHours();//获取小时
h = h>12?(h-12):h;//将24小时制转化为12小时制
var m = t.getMinutes();//获取分针
var s = t.getSeconds();//获取秒针
context.save();//再次保存2
context.setLineWidth(7);
//旋转角度=30度*（h+m/60+s/3600）
//分针旋转角度=6度*（m+s/60）
//秒针旋转角度=6度*s
context.beginPath();
//绘制时针
context.rotate((Math.PI/6)*(h+m/60+s/3600));
context.moveTo(-20,0);
context.lineTo(width/4.5-20,0);
context.stroke();
context.restore();//恢复到2,（最初未旋转状态）避免旋转叠加
context.save();//3
//画分针
context.setLineWidth(5);
context.beginPath();
context.rotate((Math.PI/30)*(m+s/60));
context.moveTo(-20,0);
context.lineTo(width/3.5-20,0);
context.stroke();
context.restore();//恢复到3，（最初未旋转状态）避免旋转叠加
context.save();
//绘制秒针
context.setLineWidth(2);
context.beginPath();
context.rotate((Math.PI/30)*s);
context.moveTo(-20,0);
context.lineTo(width/3-20,0);
context.stroke();
}
//调用
function drawClock(){
reSet();
circle();
num();
smallGrid();
bigGrid();
move();
}
drawClock()//调用运动函数
// 调用 wx.drawCanvas，通过 canvasId 指定在哪张画布上绘制，通过 actions 指定绘制行为
wx.drawCanvas({
canvasId:'myCanvas',
actions: context.getActions()
})
},
//页面卸载，清除画布绘制计时器
onUnload:function(){
clearInterval(this.interval)
}
})

index.wxml中存放着canvas标签，并通过canvas-id和class指定了组件标识符和样式选择器

<canvas canvas-id="myCanvas" class="canvas"></canvas>

index.wxss设置画布样式

.canvas{
width: 100%;
height: 100%;
position: fixed;
}

app.json文件设置了页面路径和窗口表现

{
"pages": [
"pages/index"
],
"window": {
"navigationBarTextStyle": "light",
"navigationBarTitleText": "画布时钟",
"navigationBarBackgroundColor": "#000",
"backgroundColor": "#fbf9fe"
}
}

这样，整个微信小程序画布时钟就简单的创建完成，看一下效果

guthub下载地址：https://github.com/RidingACodeToStray/weCanvasClock.Git

以上所述是小编给大家介绍的JS绘制微信小程序画布时钟，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

• 微信小程序 二维码canvas绘制实例详解
• 微信小程序 绘图之饼图实现
• 微信小程序 小程序制作及动画（animation样式）详解
• 微信小程序的动画效果详解
• 微信小程序 连续旋转动画（this.animation.rotate）详解
• 微信小程序实现登录页云层漂浮的动画效果
• 微信小程序开发之animation循环动画实现的让云朵飘效果
• 微信小程序开发animation心跳动画效果
• 微信小程序开发之麦克风动画 帧动画 放大 淡出
• 微信小程序 动画的简单实例
• 微信小程序实现的涂鸦功能示例【附源码下载】