• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

用canvas在微信小程序上画时钟

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

【转】超详细,用canvas在微信小程序上画时钟教程

 

最近开始学习canvas,看了慕课网的一个视频,开始自己动手在微信小程序上画个时钟,

首先我们可以先看以下微信小程序的官方文档:https://mp.weixin.qq.com/debug/wxadoc/dev/api/canvas/reference.html

和canvas的手册对比:http://www.w3school.com.cn/tags/html_ref_canvas.asp

我觉得其实除了删减一些内容之外没什么太大的区别

 

直接贴代码: 

wxml

<!--index.wxml-->
<view class="container">
<canvas canvas-id="clock"/>
</view>

wxss

/**index.wxss**/

.container {
  height: 100%;
  width: 100%;
}

canvas {
  height: 100%;
  width: 100%;
}

/*有些人会有疑问为什么设置了100%却没有100%,其实要到app.wxss里设置一下*/
/**app.wxss**/
page{
  width:100%;
  height:100%;
}

js

Page({
  data: {
    width: 0,
    height: 0
  },
  onLoad: function (options) {
    var that = this
    //获取系统信息  
    wx.getSystemInfo({
      //获取系统信息成功,将系统窗口的宽高赋给页面的宽高  
      success: function (res) {
        that.width = res.windowWidth
        // console.log(that.width)   375
        that.height = res.windowHeight
        // console.log(that.height)  625
        // 这里的单位是PX,实际的手机屏幕有一个Dpr,这里选择iphone,默认Dpr是2
      }
    })
  },

  onReady: function () {
    this.drawClock();
    // 每40ms执行一次drawClock(),人眼看来就是流畅的画面
    this.interval = setInterval(this.drawClock, 40);
  },


  // 所有的canvas属性以及Math.sin,Math.cos()等涉及角度的参数都是用弧度表示
  // 时钟
  drawClock: function () {
    const ctx = wx.createCanvasContext('clock');
    var height = this.height;
    var width = this.width;
    // 设置文字对应的半径
    var R = width / 2 - 60;
    // 把原点的位置移动到屏幕中间,及宽的一半,高的一半
    ctx.translate(width / 2, height / 2);

    // 画外框
    function drawBackground() {
      // 设置线条的粗细,单位px
      ctx.setLineWidth(8);
      // 开始路径
      ctx.beginPath();
      // 运动一个圆的路径
      // arc(x,y,半径,起始位置,结束位置,false为顺时针运动)
      ctx.arc(0, 0, width / 2 - 30, 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);
          // 因为微信小程序不支持BaseLine这个属性,所以这里我们只能自己手动调整位置
        if (hour == 12) {
          ctx.fillText(hour, x - 11, y + 6);
        } else if (hour == 6) {
          ctx.fillText(hour, x - 5, y + 6);
        } 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.save();
      ctx.beginPath();
      // 根据小时数确定大的偏移
      var rad = 2 * Math.PI / 12 * hour;
      // 根据分钟数确定小的偏移
      var mrad = 2 * Math.PI / 12 / 60 * minute;
      // 做旋转
      ctx.rotate(rad + mrad);
      ctx.setLineWidth(8);
      // 设置线条结束样式为圆
      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(6);
      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(4);
      // 设置线条颜色为红色,默认为黑色
      ctx.setStrokeStyle('red');
      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, 8, 0, 2 * Math.PI, false);
      ctx.setFillStyle('lightgrey');
      ctx.fill();
      ctx.closePath();
    }

    function Clock() {
      // 实时获取各个参数
      var now = new Date();
      var hour = now.getHours();
      var minute = now.getMinutes()
      var second = now.getSeconds();
      var msecond = now.getMilliseconds();
      // 依次执行各个方法
      drawBackground();
      drawHoursNum();
      drawdots();
      drawHour(hour, minute);
      drawMinute(minute, second);
      drawSecond(second, msecond);
      drawDot();
      // 微信小程序要多个draw才会画出来,所以在最后画出
      ctx.draw();
    }
    // 执行Clock这个方法,实际上执行了所有步骤
    Clock();
  }
})

最后出来是这个样子(比较遗憾的是小程序好像不支持设置canvas的文字样式):

 
 
 

最近开始学习canvas,看了慕课网的一个视频,开始自己动手在微信小程序上画个时钟,

首先我们可以先看以下微信小程序的官方文档:https://mp.weixin.qq.com/debug/wxadoc/dev/api/canvas/reference.html

和canvas的手册对比:http://www.w3school.com.cn/tags/html_ref_canvas.asp

我觉得其实除了删减一些内容之外没什么太大的区别

 

直接贴代码: 

wxml

<!--index.wxml-->
<view class="container">
<canvas canvas-id="clock"/>
</view>

wxss

/**index.wxss**/

.container {
  height: 100%;
  width: 100%;
}

canvas {
  height: 100%;
  width: 100%;
}

/*有些人会有疑问为什么设置了100%却没有100%,其实要到app.wxss里设置一下*/
/**app.wxss**/
page{
  width:100%;
  height:100%;
}

js

Page({
  data: {
    width: 0,
    height: 0
  },
  onLoad: function (options) {
    var that = this
    //获取系统信息  
    wx.getSystemInfo({
      //获取系统信息成功,将系统窗口的宽高赋给页面的宽高  
      success: function (res) {
        that.width = res.windowWidth
        // console.log(that.width)   375
        that.height = res.windowHeight
        // console.log(that.height)  625
        // 这里的单位是PX,实际的手机屏幕有一个Dpr,这里选择iphone,默认Dpr是2
      }
    })
  },

  onReady: function () {
    this.drawClock();
    // 每40ms执行一次drawClock(),人眼看来就是流畅的画面
    this.interval = setInterval(this.drawClock, 40);
  },


  // 所有的canvas属性以及Math.sin,Math.cos()等涉及角度的参数都是用弧度表示
  // 时钟
  drawClock: function () {
    const ctx = wx.createCanvasContext('clock');
    var height = this.height;
    var width = this.width;
    // 设置文字对应的半径
    var R = width / 2 - 60;
    // 把原点的位置移动到屏幕中间,及宽的一半,高的一半
    ctx.translate(width / 2, height / 2);

    // 画外框
    function drawBackground() {
      // 设置线条的粗细,单位px
      ctx.setLineWidth(8);
      // 开始路径
      ctx.beginPath();
      // 运动一个圆的路径
      // arc(x,y,半径,起始位置,结束位置,false为顺时针运动)
      ctx.arc(0, 0, width / 2 - 30, 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);
          // 因为微信小程序不支持BaseLine这个属性,所以这里我们只能自己手动调整位置
        if (hour == 12) {
          ctx.fillText(hour, x - 11, y + 6);
        } else if (hour == 6) {
          ctx.fillText(hour, x - 5, y + 6);
        } 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.save();
      ctx.beginPath();
      // 根据小时数确定大的偏移
      var rad = 2 * Math.PI / 12 * hour;
      // 根据分钟数确定小的偏移
      var mrad = 2 * Math.PI / 12 / 60 * minute;
      // 做旋转
      ctx.rotate(rad + mrad);
      ctx.setLineWidth(8);
      // 设置线条结束样式为圆
      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(6);
      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(4);
      // 设置线条颜色为红色,默认为黑色
      ctx.setStrokeStyle('red');
      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, 8, 0, 2 * Math.PI, false);
      ctx.setFillStyle('lightgrey');
      ctx.fill();
      ctx.closePath();
    }

    function Clock() {
      // 实时获取各个参数
      var now = new Date();
      var hour = now.getHours();
      var minute = now.getMinutes()
      var second = now.getSeconds();
      var msecond = now.getMilliseconds();
      // 依次执行各个方法
      drawBackground();
      drawHoursNum();
      drawdots();
      drawHour(hour, minute);
      drawMinute(minute, second);
      drawSecond(second, msecond);
      drawDot();
      // 微信小程序要多个draw才会画出来,所以在最后画出
      ctx.draw();
    }
    // 执行Clock这个方法,实际上执行了所有步骤
    Clock();
  }
})

最后出来是这个样子(比较遗憾的是小程序好像不支持设置canvas的文字样式):


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
微信小程序taro图片等比缩放不限制高度发布时间:2022-07-18
下一篇:
uni-app(四)小程序里的vuex发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap