利用H5的canvas画一个时钟

学习了一周的canvas了，看了一些资料和视频，跟着视频也画了一些统计图和圆，矩形，线之类的，跟着视频也做了一个钟表，话不多说，直接上代码

canvas上套一个div盒子，作为钟表的背景

<div class="block">
    <canvas id="view" height="400px" width="400px"></canvas>
 </div>

相关样式

 <style>
    .block {
      width: 400px;
      height: 400px;
      margin: 100px auto;
      background-color: #ddd;
      border-radius: 20px;
    }
 </style>

获取canvas元素和上下文

    // 获取标签
    let canvas = document.querySelector('#view')
    // 获取画布的上下文
    let c = canvas.getContext('2d')

定义表盘，表针，刻度线，圆，半径等基础数据

    // 定义基础变量
    let w = h = 400 //时钟宽高
    let x = y = 200 //时钟中心坐标
    let r = 180 //时钟半径
    let r_hour = 60 //时针长度
    let r_minute = 120 //分针长度
    let r_second = 140 //秒针长度
    let r_text = 140 //定义表盘文字的半径
    let r_square = 165 //刻度
    let r_circle = 10 //表盘小圆点
    let deg = 2 * Math.PI //定义基本的画圆

移动中心点

    // 平移中心点
    c.translate(w/2,h/2)

定义画直线函数

     // 画直线
    function drawLine(x1,y1,x2,y2,color,width) {
      c.beginPath()
      c.moveTo(x1,y1)
      c.lineTo(x2,y2)
      c.strokeStyle = color
      c.lineWidth = width
      // 让指针头变圆
      c.lineCap = 'round' //变圆
      c.stroke()
      c.closePath()
    }

定义画文字函数

     // 写文字
    function drawText(text,x,y) {
      c.font = 'bold 26px 微软雅黑'
      c.fillStyle = '#000'
      c.textAlign = 'center'
      c.textBaseline = 'middle'
      c.fillText(text,x,y)
    }

定义画圆函数

    // 画圆
    function drawCircle(x,y,r,color) {
      c.beginPath()
      c.arc(x,y,r,0,Math.PI*2)
      c.fillStyle = color
      c.fill()
      c.closePath()
    }

画表的圆盘

  // 画圆盘
  drawCircle(0,0,r,'#fff')

画时针，分针，秒针

        drawLine(0,0,0,r_hour,'#000',10)
        drawLine(0,0,0,r_minute,'#000',5)
        drawLine(0,0,0,r_second,'#f00',2)

画表针中心点

        // 画表钉中心圆
        drawCircle(0,0,r_circle,'#000')

画数字   调用数学对象的cos和sin方法，计算坐标

        // 画数字
        for (let i = 1; i <= 12; i++) {
          /* 
          计算圆周坐标
          x = x + r * cos(0)
          y = y + r * sin(0)
          */
        let o = ((Math.PI * 2) / 12) * i - Math.PI / 2
        let x = r_text * Math.cos(o)
        let y = r_text * Math.sin(o)
        drawText(i,x,y)  
        }

画刻度线

        // 画刻度
        for (let i = 1; i <= 60; i++) {
          /* 
          计算圆周坐标
          x = x + r * cos(0)
          y = y + r * sin(0)
          */
        let o = ((Math.PI * 2) / 60) * i - Math.PI / 2
        let x1 = r * Math.cos(o)
        let y1 = r * Math.sin(o)
        }

if判断，如果为整点，则刻度线加长，颜色加深，判断条件，i % 5 == 0

        /* 
        判断是否为整点
        */
        if(i % 5 == 0) {
          let x2 = r_square * Math.cos(o)
          let y2 = r_square * Math.sin(o)
          drawLine(x1,y1,x2,y2,'#999',3)
        }else {
          let x2 = (r_square + 4) * Math.cos(o)
          let y2 = (r_square + 4) * Math.sin(o)
          drawLine(x1,y1,x2,y2,'#aaa',2)
          }
        }

钟表基本画完毕，接下来就是获取真实的时间，使用Date对象，并获取时分秒，通过计算圆周公式转换

        // 画时钟的表针

        // 获取当前时间
        let date = new Date()
        let hour = date.getHours() * (deg/24) - deg/4
        let minute = date.getMinutes() * (deg/60) - deg/4
        let second = date.getSeconds() * (deg/60) - deg/4
        drawLine(0,0,r_hour * Math.cos(hour),r_hour * Math.sin(hour), '#000',10)
        drawLine(0,0,r_minute * Math.cos(minute),r_minute * Math.sin(minute), '#000',5)
        drawLine(0,0,r_second * Math.cos(second),r_second * Math.sin(second), '#f00',2)
        // drawLine(0,0,0,r_hour,'#000',10)
        // drawLine(0,0,0,r_minute,'#000',5)
        // drawLine(0,0,0,r_second,'#f00',2)

用函数封装起来，使用定时器，每间隔一秒，调用函数，重绘页面

// 钟表函数封装
    function clock() {
        // 画圆盘
        drawCircle(0,0,r,'#fff')

        // 画时钟的表针

        // 获取当前时间
        let date = new Date()
        let hour = date.getHours() * (deg/24) - deg/4
        let minute = date.getMinutes() * (deg/60) - deg/4
        let second = date.getSeconds() * (deg/60) - deg/4
        drawLine(0,0,r_hour * Math.cos(hour),r_hour * Math.sin(hour), '#000',10)
        drawLine(0,0,r_minute * Math.cos(minute),r_minute * Math.sin(minute), '#000',5)
        drawLine(0,0,r_second * Math.cos(second),r_second * Math.sin(second), '#f00',2)
        // drawLine(0,0,0,r_hour,'#000',10)
        // drawLine(0,0,0,r_minute,'#000',5)
        // drawLine(0,0,0,r_second,'#f00',2)

        // 画表钉中心圆
        drawCircle(0,0,r_circle,'#000')

        // 画数字
        for (let i = 1; i <= 12; i++) {
          /* 
          计算圆周坐标
          x = x + r * cos(0)
          y = y + r * sin(0)
          */
        let o = ((Math.PI * 2) / 12) * i - Math.PI / 2
        let x = r_text * Math.cos(o)
        let y = r_text * Math.sin(o)
        drawText(i,x,y)  
        }

        // 画刻度
        for (let i = 1; i <= 60; i++) {
          /* 
          计算圆周坐标
          x = x + r * cos(0)
          y = y + r * sin(0)
          */
        let o = ((Math.PI * 2) / 60) * i - Math.PI / 2
        let x1 = r * Math.cos(o)
        let y1 = r * Math.sin(o)
        /* 
        判断是否为整点
        */
        if(i % 5 == 0) {
          let x2 = r_square * Math.cos(o)
          let y2 = r_square * Math.sin(o)
          drawLine(x1,y1,x2,y2,'#999',3)
        }else {
          let x2 = (r_square + 4) * Math.cos(o)
          let y2 = (r_square + 4) * Math.sin(o)
          drawLine(x1,y1,x2,y2,'#aaa',2)
          }
        }
    }

使用定时器，1秒调用一次

    // 加入定时器 - 1秒调用一次
    setInterval(() => {
      clock()
    }, 1000);

因为页面一开始不显示，有1秒的等待时间，所以需要首先调用一次函数

    // 初始化执行
    clock()
    // 加入定时器 - 1秒调用一次
    setInterval(() => {
      clock()
    }, 1000);

完成，下面是页面的展示效果