开发者社区> 流楚丶格念> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

微信小程序——模拟时钟案例

简介: 微信小程序——模拟时钟案例
+关注继续查看

案例效果图


实时更新,因为我当时是六点多


image


前导知识:canvas


微信小程序中的canvas画布(内容过多,请查看我整理的另一篇博客):链接:


https://yangyongli.blog.csdn.net/article/details/115406308


如果想查看网页中的canvas知识,可点击:


https://blog.csdn.net/weixin_45525272/article/details/113527524


代码部分


wxml


<!-- canvas组件 -->
<canvas canvas-id="myCanvas" class="mycanvas"></canvas>


wxss


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


js


Page({
  width: 0, // 窗口宽度
  height: 0, // 窗口高度
  timer: null, // 定时器
  onLoad: function () {
    // 获取系统信息
    wx.getSystemInfo({
      success: res => {
        console.log(res)
        // 获取窗口宽高
        this.width = res.windowWidth
        this.height = res.windowHeight
      }
    })
  },
  onReady: function () {

    // 将角度转换为弧度
    const D6 = 6 * Math.PI / 180
    const D30 = 30 * Math.PI / 180
    const D90 = 90 * Math.PI / 180

    // 创建CanvasContext
    var ctx = wx.createCanvasContext('myCanvas')

    var width = this.width
    var height = this.height

    // 计算表盘半径,留出 30px 外边距
    var radius = width / 2 - 30

    draw()
    this.timer = setInterval(draw, 1000)

    function draw() {
      // 设置坐标轴原点为窗口的中心点
      ctx.translate(width / 2, height / 2)
      // 绘制表盘
      drawClock(ctx, radius)
      // 绘制指针
      drawHand(ctx, radius)
      // 执行绘制
      ctx.draw()
    }

    function drawClock(ctx, radius) {

      // 绘制大圆
      ctx.setLineWidth(2)  // 设置线条的粗细,单位px
      ctx.beginPath()      // 开始一个新路径
      ctx.arc(0, 0, radius, 0, 2 * Math.PI, true)
      ctx.stroke()

      // 绘制中心圆
      ctx.setLineWidth(1)
      ctx.beginPath()
      ctx.arc(0, 0, 8, 0, 2 * Math.PI, true) // 半径8px
      ctx.stroke()

      // 绘制大刻度盘
      ctx.setLineWidth(5)
      for (var i = 0; i < 12; ++i) {
        // 以原点为中心顺时针旋转(多次调用旋转的角度会叠加)
        ctx.rotate(D30) // 360 / 12 = 30
        ctx.beginPath()
        ctx.moveTo(radius, 0)
        ctx.lineTo(radius - 15, 0) // 大刻度长度15px
        ctx.stroke()
      }

      // 绘制小刻度盘
      ctx.setLineWidth(1)
      for (var i = 0; i < 60; ++i) {
        ctx.rotate(D6) // 360 / 60 = 6
        ctx.beginPath()
        ctx.moveTo(radius, 0)
        ctx.lineTo(radius - 10, 0) // 小刻度盘长度10px
        ctx.stroke()
      }

      // 绘制文本
      ctx.setFontSize(20)         // 字号
      ctx.textBaseline = 'middle' // 文本上下居中

      // 文本距离时钟中心点半径
      var r = radius - 30

      for (var i = 1; i <= 12; ++i) {
        // 利用三角函数计算文本坐标
        var x = r * Math.cos(D30 * i - D90)
        var y = r * Math.sin(D30 * i - D90)
        if (i > 10) { // 调整 11 和 12 的位置
          // 在画布上绘制文本 fillText(文本, 左上角x坐标, 左上角y坐标)
          ctx.fillText(i, x - 12, y)
        } else {
          ctx.fillText(i, x - 6, y)
        }
      }
    }

    // 绘制指针
    function drawHand(ctx, radius) {
      var t = new Date()     // 获取当前时间
      var h = t.getHours()   // 小时
      var m = t.getMinutes() // 分
      var s = t.getSeconds() // 秒
      h = h > 12 ? h - 12 : h // 将24小时制转化为12小时制
      
      // 时间从3点开始,逆时针旋转90度,指向12点
      ctx.rotate(-D90)

      // 绘制时针
      ctx.save() // 记录旋转状态
      ctx.rotate(D30 * (h + m / 60 + s / 3600))
      ctx.setLineWidth(6)
      ctx.beginPath()
      ctx.moveTo(-20, 0) // 线条起点(针尾留出20px)
      ctx.lineTo(radius / 2.6, 0) // 线条长度
      ctx.stroke()
      ctx.restore() // 恢复旋转状态,避免旋转叠加

      // 绘制分针
      ctx.save()
      ctx.rotate(D6 * (m + s / 60))
      ctx.setLineWidth(4)
      ctx.beginPath()
      ctx.moveTo(-20, 0)
      ctx.lineTo(radius / 1.8, 0)
      ctx.stroke()
      ctx.restore()

      // 绘制秒针
      ctx.save()
      ctx.rotate(D6 * s)
      ctx.setLineWidth(2)
      ctx.beginPath()
      ctx.moveTo(-20, 0)
      ctx.lineTo(radius / 1.6, 0)
      ctx.stroke()
      ctx.restore()
    }
  },
  // 页面卸载,清除画布绘制定时器
  onUnload: function () {
    clearInterval(this.timer)
  }
})

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
微信小程序——调查问卷案例
微信小程序——调查问卷案例
14 0
微信小程序——计算器案例
微信小程序——计算器案例
14 0
微信小程序 - ES6
微信小程序 - ES6
14 0
【愚公系列】2022年04月 微信小程序-image图片
【愚公系列】2022年04月 微信小程序-image图片
19 0
【愚公系列】2022年02月 微信小程序-app.json配置属性之plugins
【愚公系列】2022年02月 微信小程序-app.json配置属性之plugins
50 0
【愚公系列】2022年02月 微信小程序-app.json配置属性
【愚公系列】2022年02月 微信小程序-app.json配置属性
25 0
微信小程序爬坑之路
微信小程序爬坑之路
66 0
微信小程序从入门到入土教程(03)
微信小程序从入门到入土教程(03)
41 0
《微信小程序:开发入门及案例详解》—— 导读
自2016年9月21日微信小程序公布以来,微信技术群中关于小程序的讨论就没间断过,这是又一次创业的好机会,尤其是对中小企业扩大网络影响力很有利。我们在抓紧时间学习小程序的过程中,总结并实践了小程序的功能,并希望通过这本书传达给广大的读者。
3038 0
+关注
流楚丶格念
csdn平台优质创作者,51cto TOP博主,360图书馆科技博主,燕山大学目前大三在读,日拱一卒,功不唐捐,加油!!!
1010
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载