微信小程序开发者交流群

admin

admin

发表于 2017-07-01 13:02:43

摘要:微信小程序开发者社区(www.mntuku.cn)为您提供:Canvas绘制微信小程序画布时钟
相关的资讯,希望对您有帮助。

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

作者:骑着袋马去流浪,来自原文地址微信小程序官方组件也提供了画布功能,下面分享一下如何创建微信小程序画布时钟。总体思路是对pages中的一个小程序页面构建画布时钟逻辑程序,通过app.json公共设置来配置入口。 ...

作者:骑着袋马去流浪,来自原文地址

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

总体思路是对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指定了组件标识符和样式选择器


 

index.wxss设置画布样式

1
2
3
4
5
.canvas{
    width100%;
    height100%;
    positionfixed;
}

  

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

1
2
3
4
5
6
7
8
9
10
11
{
    pages: [
        pages/index
    ],
  window: {
    navigationBarTextStylelight,
    navigationBarTitleText画布时钟,
    navigationBarBackgroundColor#000,
    backgroundColor#fbf9fe
  }
}

  

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

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

项目下载:weCanvasClock-master.zip


106阅读 | 0评论
你的回应