Canvas实现简单时钟表盘

已于 2023-05-15 22:33:09 修改
阅读量521 收藏 3
点赞数
文章标签： 前端 javascript 开发语言
于 2023-05-15 22:17:25 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_31808873/article/details/130693359
版权

重复的记忆，会让知识流逝的速度越来越慢

仅作个人学习记录用，大佬勿喷，当然能帮到正好需要的朋友最好

1.新建一个canvas画布，此处很简单,不过多赘述

    <canvas id="box" width='300' height='300'> 您的浏览器不支持canvas,请升级! </canvas>
    <script>
      window.onload = () => {
        /** @type {HTMLCanvasElement} */
        let canvas = document.querySelector('#box')
        if (!canvas.getContext) return
        let ctx = canvas.getContext('2d')
      }
    </script>

2.下边开始写代码

封装一个函数，并使用window.requestAnimationFrame(draw)来调用，每秒调用60次左右，此处不用setInterval是有原因的，具体原因可以MDN自行查询requestAnimationFrame此API

function draw(){
}

函数每次调用,先擦除canvas画布,并且new一个时间实例，后边要用到

 function draw() {
        ctx.clearRect(0, 0, 300, 300)
        ctx.save()
        let time = new Date()
        let h = time.getHours()
        let m = time.getMinutes()
        let s = time.getSeconds()
        let ss = time.getMilliseconds()
        restore()
}

开始绘制时钟的圆盘背景,这一步不难，就是调用canvas的arc方法进行绘制圆

       // 绘制圆盘背景
        ctx.save()
        ctx.translate(150, 150)
        ctx.fillStyle = 'white'
        ctx.beginPath()
        ctx.arc(0, 0, 130, 0, Math.PI * 2)
        ctx.fill()
        ctx.restore()

 

然后开始绘制时钟内圈数字(此处需要用到三角函数)

忘了三角函数的同学可以看这张图

看完这张图此处就不难理解，圆盘的半径我们已知，整个圆的弧度是Math.PI*2,所以cos也能求出来，就是整个圆的弧度除以总共12小时，剩下那一个边就是x轴,y轴也是同理，通过sin函数就能求出，求出一个的x,y，那么此时我们就可以通过for循环来进行12小时的整体绘制

        // 绘制时针数字
        ctx.save()
        ctx.translate(150, 150)
        ctx.font = '30px MiSans'
        ctx.textAlign = 'center'
        ctx.textBaseline = 'middle'
        let numbers = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2]
        for (let i = 0; i < numbers.length; i++) {
          let x = Math.cos(((Math.PI * 2) / 12) * i) * 100
          let y = Math.sin(((Math.PI * 2) / 12) * i) * 100
          ctx.fillText(numbers[i], x, y)
        }
        ctx.restore()

通过上边操作我们已经绘制好了时钟数字，此时开始绘制时针，时针的绘制就用到了我们上边new出来的时间实例，此处旋转的角度不太容易理解，首先Math.PI * 2/ 12* h是当前时间下时针指向的数字，但是他只有整数，所以只能指向整点，此时我们加上Math.PI * 2/ 12 / 60* m，就代表我们此时时针的弧度是小时的弧度+分钟的弧度，此时就能正确指向几点几分，后边的秒同理，也可不加

       // 绘制时针
        ctx.save()
        ctx.translate(150, 150)
        ctx.rotate(
          ((Math.PI * 2) / 12) * h +
            ((Math.PI * 2) / 12 / 60) * m +
            ((Math.PI * 2) / 12 / 60 / 60) * s
        )
        ctx.lineCap = 'round'
        ctx.lineWidth = 5
        ctx.beginPath()
        ctx.moveTo(0, 0)
        ctx.lineTo(0, -50)
        ctx.stroke()
        ctx.restore()

绘制完时针绘制分针，分针与时针同理

        // 绘制分针
        ctx.save()
        ctx.translate(150, 150)
        ctx.rotate(((Math.PI * 2) / 60) * m)
        ctx.lineCap = 'round'
        ctx.lineWidth = 3
        ctx.beginPath()
        ctx.moveTo(0, 0)
        ctx.lineTo(0, -70)
        ctx.stroke()
        ctx.restore()

然后就是绘制秒针 ，此处可以精确到毫秒，会让动画看起来更加流畅

        //绘制秒针
        ctx.save()
        ctx.translate(150, 150)
        ctx.rotate(((Math.PI * 2) / 60) * s + ((Math.PI * 2) / 60 / 1000) * ss)
        ctx.lineCap = 'round'
        ctx.lineWidth = 2
        ctx.strokeStyle = 'red'
        ctx.beginPath()
        ctx.moveTo(0, 0)
        ctx.lineTo(0, -90)
        ctx.stroke()
        ctx.restore()

绘制指针中心圆，没什么难点

 // 绘制中心圆
        ctx.save()
        ctx.translate(150, 150)
        ctx.fillStyle = 'black'
        ctx.beginPath()
        ctx.arc(0, 0, 10, 0, Math.PI * 2)
        ctx.fill()
        ctx.fillStyle = 'gray'
        ctx.beginPath()
        ctx.arc(0, 0, 5, 0, Math.PI * 2)
        ctx.fill()
        ctx.restore()

绘制时针刻度，此处也较好理解，就是循环绘制线条

       // 绘制时针刻度
        ctx.save()
        ctx.translate(150, 150)
        for (let i = 0; i < 12; i++) {
          ctx.rotate((Math.PI * 2) / 12)
          ctx.lineWidth = 4
          ctx.beginPath()
          ctx.moveTo(0, -130)
          ctx.lineTo(0, -120)
          ctx.stroke()
        }
        ctx.restore()

绘制分针和秒针的刻度，同理

      // 绘制分针刻度
        ctx.save()
        ctx.translate(150, 150)
        for (let i = 0; i < 60; i++) {
          ctx.rotate((Math.PI * 2) / 60)
          ctx.lineWidth = 2
          ctx.beginPath()
          ctx.moveTo(0, -130)
          ctx.lineTo(0, -125)
          ctx.stroke()
        }
        ctx.restore()

好了，到此为止我们就已经绘制了一个简单的时钟表盘 

具体效果如下

下边贴出所有代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      html,
      body {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
      }
      .clock {
        width: 300px;
        height: 300px;
        background-color: black;
        border-radius: 50px;
        margin: 10px;
      }
    </style>
  </head>
  <body>
    <div class="clock">
      <canvas id="canvas" width="300" height="300"
        >您的浏览器不支持canvas，请升级!</canvas
      >
    </div>
    <script>
      /**@type {HTMLCanvasElement}*/
      let canvas = document.getElementById('canvas')

      let ctx = canvas.getContext('2d')

      requestAnimationFrame(draw)

      function draw() {
        ctx.clearRect(0, 0, 300, 300)
        ctx.save()
        let time = new Date()
        let h = time.getHours()
        let m = time.getMinutes()
        let s = time.getSeconds()
        let ss = time.getMilliseconds()

        // 绘制圆盘背景
        ctx.save()
        ctx.translate(150, 150)
        ctx.fillStyle = 'white'
        ctx.beginPath()
        ctx.arc(0, 0, 130, 0, Math.PI * 2)
        ctx.fill()
        ctx.restore()

        // 绘制时针刻度
        ctx.save()
        ctx.translate(150, 150)
        ctx.font = '30px MiSans'
        ctx.textAlign = 'center'
        ctx.textBaseline = 'middle'
        let numbers = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2]
        for (let i = 0; i < numbers.length; i++) {
          let x = Math.cos(((Math.PI * 2) / 12) * i) * 100
          let y = Math.sin(((Math.PI * 2) / 12) * i) * 100
          ctx.fillText(numbers[i], x, y)
        }
        ctx.restore()

        // 绘制时针
        ctx.save()
        ctx.translate(150, 150)
        ctx.rotate(
          ((Math.PI * 2) / 12) * h +
            ((Math.PI * 2) / 12 / 60) * m +
            ((Math.PI * 2) / 12 / 60 / 60) * s
        )
        ctx.lineCap = 'round'
        ctx.lineWidth = 5
        ctx.beginPath()
        ctx.moveTo(0, 0)
        ctx.lineTo(0, -50)
        ctx.stroke()
        ctx.restore()

        // 绘制分针
        ctx.save()
        ctx.translate(150, 150)
        ctx.rotate(((Math.PI * 2) / 60) * m)
        ctx.lineCap = 'round'
        ctx.lineWidth = 3
        ctx.beginPath()
        ctx.moveTo(0, 0)
        ctx.lineTo(0, -70)
        ctx.stroke()
        ctx.restore()

        //绘制秒针
        ctx.save()
        ctx.translate(150, 150)
        ctx.rotate(((Math.PI * 2) / 60) * s + ((Math.PI * 2) / 60 / 1000) * ss)
        ctx.lineCap = 'round'
        ctx.lineWidth = 2
        ctx.strokeStyle = 'red'
        ctx.beginPath()
        ctx.moveTo(0, 0)
        ctx.lineTo(0, -90)
        ctx.stroke()
        ctx.restore()

        // 绘制中心圆
        ctx.save()
        ctx.translate(150, 150)
        ctx.fillStyle = 'black'
        ctx.beginPath()
        ctx.arc(0, 0, 10, 0, Math.PI * 2)
        ctx.fill()
        ctx.fillStyle = 'gray'
        ctx.beginPath()
        ctx.arc(0, 0, 5, 0, Math.PI * 2)
        ctx.fill()
        ctx.restore()

        // 绘制时针刻度
        ctx.save()
        ctx.translate(150, 150)
        for (let i = 0; i < 12; i++) {
          ctx.rotate((Math.PI * 2) / 12)
          ctx.lineWidth = 4
          ctx.beginPath()
          ctx.moveTo(0, -130)
          ctx.lineTo(0, -120)
          ctx.stroke()
        }
        ctx.restore()

        // 绘制分针刻度
        ctx.save()
        ctx.translate(150, 150)
        for (let i = 0; i < 60; i++) {
          ctx.rotate((Math.PI * 2) / 60)
          ctx.lineWidth = 2
          ctx.beginPath()
          ctx.moveTo(0, -130)
          ctx.lineTo(0, -125)
          ctx.stroke()
        }
        ctx.restore()

        ctx.restore()
        requestAnimationFrame(draw)
      }
    </script>
  </body>
</html>

天青色等烟雨QAQ
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
罗盘时钟代码
2303_77137340的博客
04-08 1516
接下来就是核心内容了，我们要使用JavaScript来绘制罗盘时钟。以上就是罗盘时钟的基本实现，您可以根据自己的需要进行优化和修改。
html5 canvas绘制时钟表时间效果源码下载
11-06
在本文中，我们将深入探讨如何使用HTML5 Canvas绘制一个动态更新的时间显示，即一个模拟时钟表的效果。 首先，我们需要在HTML文档中创建一个`<canvas>`元素，为其指定一个ID以便于通过JavaScript进行操作： ```...
canvas之时钟
时光清浅处，一步一安然
07-01 275
在画时钟之前，我们先来聊一聊canvas动画。 驱动动画的方法有以下三种：那么我们制作canvas动画使用哪种更好呢？所以在制作canvas动画时，更推荐使用。制作canvas动画的步骤：那么就让我们看看时钟的动画制作吧： 效果如下：
【前端html/js】使用canvas实现实时时钟
飛之宇
01-08 652
【前端html/js】使用canvas实现实时时钟及贴图版
canvas绘制时钟
aliven1的博客
04-08 122
4.帧动画 requestAnimationFrame。3.save和restore的使用。2.当前时间转化为弧度。
Html5基于Canvas画一个动态时钟
qq_35543489的博客
02-03 1384
文章目录前言一、前期准备二、绘制刻度1.流程2.效果图三、绘制文字1.流程2.效果图四、绘制指针1.取得当前时间2.绘制秒针3.绘制分针4.绘制时针5.效果图五、绘制圆心1.流程2.效果图六、让钟表动起来总结 前言 Canvas API 提供了一个通过JavaScript 和 HTML的元素来绘制图形的方式。它可以用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面。 Canvas API主要聚焦于2D图形。而同样使用元素的 WebGL API 则用于绘制硬件加速的2D和3D图形。 一、前期.
html5 canvas绘制时钟表时间特效代码
03-20
总结来说，HTML5 Canvas绘制时钟表时间特效是一种结合了编程和设计的技术，通过JavaScript和Canvas API来实现动态、互动的时钟界面。这种技术对于创建富有创新和个性化的网页应用非常有用，同时也能够帮助开发者深入...
HTML5 Canvas指针时钟表特效
06-24
在这个"HTML5 Canvas指针时钟表特效"中，我们将会探讨如何利用Canvas API来实现一个动态的、美观的圆形指针时钟。 首先，让我们了解Canvas的基本用法。在HTML5中，`<canvas>`元素提供了一个画布，通过JavaScript的...
使用canvas绘制钟表
11-06
在HTML5中，Canvas元素提供...通过深入理解和实践，你可以利用canvas实现更多复杂的2D图形和动画效果。在实际项目中，你可能还需要考虑性能优化，比如减少不必要的重绘或者使用requestAnimationFrame替代setInterval。
javascript canvas实现简易时钟例子
10-14
综上所述，这个JavaScript Canvas实现的简易时钟例子，通过Canvas API的基本绘图功能，结合JavaScript的时间处理，成功地创建了一个实时更新的钟表。它展示了Canvas在动态图形和交互式界面设计中的强大潜力。对于想...
显示时间-canvas
09-12
使用html5新技术-canvas以及javascript语言，正确的显示时间，并根据时分秒的十位或者个位的变化，产生彩色的小球
canvas 绘制钟表
kklkjfdiiu的博客
03-30 158
时钟示例
canvas绘制时钟刻度表
libinbin147256369的博客
05-05 2997
canvas绘制时钟刻度表1.首先看一下效果图2.基本知识点canvas.drawText：绘制文字，注意基线的位置为文字的左下角y轴所在的线canvas.drawLine:绘制线段，指定起始位置就好canvas.save:保存canvas的状态，比如translate平移之前或者rotate(单位为°，正为顺时针)旋转之前的状态canvas.restore:恢复到保存时候的canvas状态，这么...
Canvas实现时间刻度标尺功能
绳墨BigHead
02-19 3504
Canvas实现时间刻度标尺功能 前言:项目中需要实现一个时间标尺的功能,展示某个人在某段时间内已经被订单占用的时间,并且展示当前订单在标尺中的占用位置,大概为下图的样子 大概的实现逻辑如下: 计算时间刻度跨度。canvas总宽度为320,高度为40,注意,canvas的宽度不能使用css来写,会导致计算混乱,直接写在标签内,一共显示8个时间区域，所以每个刻度之间的宽度为320/8=40 利用canvas画一条线,X轴起点为0,终点点为320,Y轴起终点都是25,只所以不放到最底下,是因为需要给显示时间
使用canvas绘制时钟
timeless的博客
08-19 1226
canvas * { padding: 0; margin: 0; } html, body { width: 100%; height: 100%; background-color: #DDFFF8;
canvas绘制网格(增加坐标)
qq_21058391的博客
09-06 6021
1.接着上篇文章，我打算给绘制的表格增加坐标，这样看起来比较方便 //绘制网格 function drawGrid(CANVAS_WIDTH,CANVAS_HEIGHT,GRID_WIDTH,GRID_HEIGHT){ var rows=parseInt(CANVAS_WIDTH/GRID_WIDTH); var cols=parseInt(CANVAS_HEIGHT/GRID_HE
canvas画时钟
诸葛苍穹
12-13 327
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <script> window.onload = function() {
利用canvas画钟表
余光的博客
07-16 1255
canvas （HTML5新增标签） **什么是canvas？ Canvas API（画布）是在HTML5中新增的标签用于在网页实时生成图像，并且可以操作图像内容，基本上它是一个可以用JavaScript操作的位图（bitmap）。 Canvas 对象表示一个 HTML 画布元素 -。它没有自己的行为，但是定义了一个 API 支持脚本化客户端绘图操作。 首先贴出最终结果，...
Canvas画表实现当前时间走动
weixin_43735788的博客
11-23 336
&amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;title&amp;gt;Document&amp;lt;/title&amp;g
用canvas写个动态钟表
最新发布
08-22
具体来说，可以使用Canvas中的绘图命令(如arc()和lineTo())来绘制钟表的表盘和指针。然后，可以使用JavaScript的setInterval()函数来更新钟表的显示，以反映当前时间。 示例代码如下： ```html <canvas id="clock">...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值