用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索
  • TA的每日心情
    郁闷
    2017-6-29 17:34
  • 签到天数: 3 天

    [LV.2]偶尔看看I

    76

    主题

    104

    帖子

    10万

    金钱

    管理员

    Rank: 9Rank: 9Rank: 9

    积分
    0

    优秀版主

    2017-1-9 16:37:04 cyk 管理员 楼主 11898
    微信小程序学习用demo推荐:canvas画布时钟
    说明:

    利用canvas实现了模拟时钟功能。

    数据接口:

    使用本地数据接

    目录结构:
    • pages — 存放项目页面渲染相关文件
    开发环境:

    微信web开发者工具 v0.11.122100


    代码展示

    [AppleScript] 纯文本查看 复制代码
    // 获取应用实例
    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(){
                    //调用canvasApp函数
                    this.canvasClock()
                    //对canvasAPP函数循环调用
                    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)
            }
    })


    本帖子中包含更多资源

    您需要 登录 才可以下载或查看,没有帐号?立即注册

    x
    使用道具 举报 回复
    我有流量,寻求个人游戏开发者合作,有意者联系微信号jim20180688
    发新帖
    您需要登录后才可以回帖 登录 | 立即注册
    咫尺论坛|小程序开发社区
    X

    扫码添加专属客服即可随时咨询

    还可领取小程序推广攻略