• canvas 画布绘制时钟

    利用canvas绘制时钟的一个小demo 

     

    2.  
    3. html>
    4. <html lang="en">
    5.  
    6. <head>
    7.     <meta charset="UTF-8">
    8.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    9.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    10.     <title>时钟title>
    11. head>
    12.  
    13. <body>
    14.     <canvas id="canvas" width="800" height="600">canvas>
    15.  
    16.     <script type="text/javascript">
    17.         let canvas = document.querySelector('#canvas')
    18.         let cxt = canvas.getContext('2d')
    19.         function renderClock () {
    20.             cxt.clearRect(0, 0, 800, 600)//清除画布
    21.             // 使用 save() 方法对当前画布区域进行保存，并在以后的任意时间对其进行恢复（通过 restore() 方法）。
    22.             cxt.save()//保留画笔之前状态
    23.             // 将坐标移动到画布的中央
    24.             cxt.translate(400, 300)
    25.             cxt.rotate(-2 * Math.PI / 4)//旋转90度让起始角，由原来的（弧的圆形的三点钟位置是 0 度）改为12点位置
    26.             cxt.save()
    27.             /**
    28.              * cxt.arc参数说明
    29.              * x 坐标
    30.              * 圆的中心的 y 坐标。
    31.              * 圆的半径。
    32.              * 起始角，以弧度计（弧的圆形的三点钟位置是 0 度）
    33.              * 结束角，以弧度计。
    34.              * 可选。规定应该逆时针还是顺时针绘图。False = 顺时针，true = 逆时针。
    35.             */
    36.             // 创建圆绘制表盘
    37.             cxt.beginPath()//开始路径
    38.             cxt.arc(0, 0, 200, 0, 2 * Math.PI)
    39.             cxt.strokeStyle = "darkgrey"
    40.             cxt.lineWidth = 10//圆的边宽
    41.             cxt.stroke()//实际地绘制出路径。默认颜色是黑色。
    42.             cxt.closePath()//结束路径再画刻度;不然会和圆粘在一起
    43.  
    44.             //分钟
    45.             for (let j = 0; j < 60; j++) {
    46.                 cxt.rotate(Math.PI / 30)// 转6度
    47.                 cxt.beginPath()
    48.                 cxt.moveTo(180, 0)//x的刻度半径是200所以可以从x为180,Y轴为0开始到200的位置画个20长的刻度
    49.                 cxt.lineTo(190, 0)
    50.                 cxt.lineWidth = '2'
    51.                 cxt.strokeStyle = "orangered"
    52.                 cxt.stroke()
    53.                 cxt.closePath()
    54.             }
    55.             cxt.restore()
    56.             cxt.save()
    57.             // 绘制小时刻度
    58.             for (let i = 0; i < 12; i++) {
    59.                 cxt.rotate(Math.PI / 6)//每次旋转30度
    60.                 cxt.beginPath()
    61.                 cxt.moveTo(180, 0)//x的刻度半径是200所以可以从x为180,Y轴为0开始到200的位置画个20长的刻度
    62.                 cxt.lineTo(200, 0)
    63.                 cxt.lineWidth = 8//圆的边宽
    64.                 cxt.strokeStyle = "darkgrey"
    65.                 cxt.stroke()
    66.                 cxt.closePath()
    67.             }
    68.             // 时间
    69.             let time = new Date()
    70.             let H = time.getHours()
    71.             let M = time.getMinutes()
    72.             let S = time.getSeconds()
    73.             // 如果时间大于12就直接减去12 (如:当前为17点;那就是17-13=5点)
    74.             H = H > 12 ? H - 12 : H
    75.             console.log('当前小时', H + ':' + M + ':' + S);
    76.  
    77.             cxt.beginPath()
    78.             // 绘制秒针
    79.             cxt.rotate(2 * Math.PI / 60 * S)//每秒旋转的刻度乘以秒
    80.             cxt.moveTo(-30, 0)//x的刻度半径是200所以可以从x为180,Y轴为0开始到200的位置画个20长的刻度
    81.             cxt.lineTo(170, 0)
    82.             cxt.lineWidth = 2//圆的边宽
    83.             cxt.strokeStyle = "red"
    84.             cxt.stroke()
    85.             cxt.closePath()
    86.  
    87.             cxt.restore()
    88.             cxt.save()
    89.             // 绘制分针
    90.             cxt.beginPath()
    91.             cxt.rotate(2 * Math.PI / 60 * M + 2 * Math.PI / 3600 * S)//每分针一圈360为一圈,一圈有60分钟所以要除以60再乘以分钟得到旋转的角度,加上3600秒为一小时
    92.             cxt.moveTo(-20, 0)//x的刻度半径是200所以可以从x为180,Y轴为0开始到200的位置画个20长的刻度
    93.             cxt.lineTo(140, 0)
    94.             cxt.lineWidth = 4//圆的边宽
    95.             cxt.strokeStyle = "darkblue"
    96.             cxt.stroke()
    97.             cxt.closePath()
    98.             cxt.restore()
    99.             cxt.save()
    100.  
    101.             // 绘制小时
    102.             cxt.beginPath()
    103.             cxt.rotate(2 * Math.PI / 12 * H + 2 * Math.PI / 60 / 12 * M + 2 * Math.PI / 12 / 60 / 60 * S)//一小时有12刻度,乘以当间小时+分钟(一圈360度/60分钟/12小时乘以当前的分钟)+秒的算法最后得到每小时走的角度
    104.             cxt.moveTo(-20, 0)//x的刻度半径是200所以可以从x为180,Y轴为0开始到200的位置画个20长的刻度
    105.             cxt.lineTo(100, 0)
    106.             cxt.lineWidth = 6//圆的边宽
    107.             cxt.strokeStyle = "darkslategray"
    108.  
    109.  
    110.             cxt.beginPath()
    111.             // 指针中心的小圆
    112.             cxt.arc(0, 0, 8, 0, 2 * Math.PI)
    113.             cxt.fillStyle = "deepskyblue"
    114.             cxt.fill()
    115.             cxt.restore()
    116.             cxt.restore()//恢复到初始状态
    117.  
    118.         }
    119.         setInterval(() => {
    120.             renderClock()
    121.         }, 1000);
    122.  
    123.  
    124.     script>
    125. body>
    126.  
    127. html>

  • 相关阅读:
    逆向WeChat(四)
    ICMP重定向（ICMP redirect）实验分析
    springboot中自定义拦截器用Component注解不用Configuration注解的坏处是什么
    哪些自媒体平台值得操作运营？
    视差滚动：零基础css代码实现时空穿越效果
    排序算法(1)
    浅谈关于数据仓库的理解，聊聊数据仓库到底是什么？
    二叉树，堆排序及TopK问题
    Redis五种基本数据类型-ZSet
    vue3项目，点击分页器，列表接口请求两次的问题
  • 原文地址：https://blog.csdn.net/qq_40190624/article/details/126212458