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

微信小程序使用canvas绘制钟表

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

本文实例为大家分享了微信小程序使用canvas绘制钟表的具体代码,供大家参考,具体内容如下

模拟时钟

利用canvas绘制时钟,实现模拟时钟的功能,钟表时间与系统时间保持一致,刻度将24小时制转换为12小时制,需要分别绘图出中心圆、外层大圆、分针、时针、秒针。

效果图如下:

代码如下:

index.wxml

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

index.wxss

/**index.wxss**/
.mycanvas {
  width: 100%;
  height: 100%;
  position: fixed;
}

index.js

Page({
  width: 0,  //窗口宽度
  height: 0,  //窗口高度
  onLoad: function () {
    // 获取系统信息
    wx.getSystemInfo({
      // 获取系统信息成功,保存获取到的系统窗口的宽高
      success: res => {
        // console.log(res)
        this.width = res.windowWidth
        this.height = res.windowHeight
        }
      })
    },
  timer: null,  //定时器
  onReady: function(){
    //创建ctx实例
     var ctx = wx.createCanvasContext('myCanvas')
    //将角度转换为弧度,方便在后面使用
     //计算公式:弧度 = 角度*Math.PI / 180
    const D6 = 6 * Math.PI / 180
     const D30 = 30 * Math.PI / 180
     const D90 = 90 * Math.PI / 180
     // 获取宽和高值
     var width = this.width, 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){
      // 绘制大圆
      // 大圆的半径 radius 线条粗细为2px
      ctx.setLineWidth(2)  //设置线条粗细
      ctx.beginPath()  //开始一个新路径
      ctx.arc(0, 0, radius, 0, 2 * Math.PI, true)
      ctx.stroke()   //画线
      // 绘制同心圆
      // 中心圆的半径为8px 线条粗细为1px
      ctx.setLineWidth(1)  //设置线条粗细
      ctx.beginPath()  //开始一个新路径
      ctx.arc(0, 0, 8, 0, 2 * Math.PI, true)
      ctx.stroke()   //画线
      // 绘制大刻度盘 线条粗细为5px
      ctx.setLineWidth(5)
      for (var i = 0; i < 12; ++i){
        // 以原点为中心顺时针(多次调用旋转的角度会叠加)
        // 大刻度盘需要绘制12个线条,表示12个小时,每次旋转30度
        ctx.rotate(D30)   // 360 / 12 = 30
        ctx.beginPath()
        ctx.moveTo(radius, 0)
        ctx.moveTo(radius - 15, 0)  //大刻度长度15px
        ctx.stroke()
      }
      // 绘制小刻度盘,线条粗细为1px
      ctx.setLineWidth(1)
      for(var i = 0; i < 60; ++i){
        // 小刻度盘需要绘制60个线条,表示60分钟或60秒,每次旋转6度
        ctx.rotate(D6)
        ctx.beginPath()
        ctx.moveTo(radius, 0)
        ctx.lineTo(radius - 10, 0) //小刻度盘长度10px
        ctx.stroke()
      }
      //绘制文本
      ctx.setFontSize(20)  //字号
      ctx.textBaseline = 'middle'  // 文本垂直居中
      // 计算文本距离表盘中心点的半径r
      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小时制
      //时间从三点开始,逆时针旋转90度,指向12点
      ctx.rotate(-D90)
      //绘制时针
      ctx.save()   //记录旋转状态
      // 计算时针指向的刻度
      // 通过 30度 * h 可以计算每个整点的旋转角度
      // 如果时间不是整点,需要使用h + m / 60 + s / 3600 计算准确的偏移度
      ctx.rotate(D30 * (h + m / 60 + s / 3600))
      ctx.setLineWidth(6)
      ctx.beginPath()
      ctx.moveTo(-20, 0)
      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() 
    } 
  }
})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持极客世界。


鲜花

握手

雷人

路过

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

请发表评论

全部评论

专题导读
上一篇:
JS实现jQuery的append功能发布时间:2022-02-05
下一篇:
JavaScript实现动态数字时钟发布时间:2022-02-05
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

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

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

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