canvas之时钟

已于 2022-10-12 11:39:43 修改
阅读量266 收藏 1
点赞数
分类专栏： canvas 文章标签： css
于 2022-07-01 15:35:56 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40864647/article/details/125559586
版权
canvas之时钟

在画时钟之前，我们先来聊一聊canvas动画。
驱动动画的方法有以下三种：

  • setTimeOut(fn, time)
  • setInterval(fn, time)
  • requestAnimationFrame(fn)

那么我们制作canvas动画使用哪种更好呢？

  • setTimeOut(fn ,time) 和setInterval(fn, time)
    • 优点：使用方便，动画的时间间隔可以自定义
    • 缺点：隐藏浏览器标签后，会依旧运行，造成资源浪费。与浏览器刷新频率不同步。
  • requestAnimationFrame(fn)
    • 优点：性能更优良。隐藏浏览器标签后，便不会运行。与浏览器刷新频率同步。
    • 缺点：动画的时间间隔无法自定义

所以在制作canvas动画时，更推荐使用requestAnimationFrame(fn)。

制作canvas动画的步骤：

  1. 清空 canvas
  2. 保存 canvas 状态
  3. 绘制动画图形
  4. 恢复 canvas 状态

那么就让我们看看时钟的动画制作吧：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>时钟</title>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
    const canvas = document.getElementById('canvas')
    canvas.width = window.innerWidth
    canvas.height = window.innerHeight
    const ctx = canvas.getContext('2d')

    // 色系
    const [redA, redB, yellow] = ['#db655c', '#d63d46', '#9f8d7d']
    // 一圈的弧度
    const c = Math.PI * 2
    // canvas 宽高
    const { width, height } = canvas


    !(function render() {
        ctx.clearRect(0, 0, width, height)
        // 绘图
        draw()
        requestAnimationFrame(render)
    })()

    function draw() {
        // 保存状态
        ctx.save()
        // 整体偏移
        ctx.translate(width / 2, height / 2)
        // 整体旋转
        ctx.rotate(-Math.PI / 2)

        //  钟表的表框-圆弧路径
        // 内框 - 145, 20
        ctx.save()
        ctx.beginPath()
        ctx.arc(0, 0, 145, 0, Math.PI * 2)
        ctx.strokeStyle = redA
        ctx.lineWidth = 20
        ctx.stroke()
        ctx.restore()
        // 外框 - 155, 9
        ctx.save()
        ctx.beginPath()
        ctx.arc(0, 0, 155, 0, Math.PI * 2)
        ctx.strokeStyle = redB
        ctx.lineWidth = 9
        ctx.stroke()
        ctx.restore()

        // 刻度 - 直线 - 90, 120, 4, 15
        ctx.save()
        for (let i = 0; i < 4; i++) {
            ctx.beginPath()
            ctx.moveTo(90, 0)
            ctx.lineTo(120, 0)
            ctx.lineWidth = 15
            ctx.strokeStyle = redB
            ctx.stroke()
            ctx.rotate(c / 4)
        }
        ctx.restore()

        // 小时 - 直线 - 90, 120, 12, 6
        ctx.save()
        for (let i = 0; i < 12; i++) {
            if(i % 3){
                ctx.beginPath()
                ctx.moveTo(90, 0)
                ctx.lineTo(120, 0)
                ctx.lineWidth = 6
                ctx.strokeStyle = yellow
                ctx.stroke()
            }
            ctx.rotate(c / 12)
        }
        ctx.restore()

        // 分钟 - 直线 - 118, 120, 60, 3
        ctx.save()
        for (let i = 0; i < 60; i++) {
            if(i % 5){
                ctx.beginPath()
                ctx.moveTo(118, 0)
                ctx.lineTo(120, 0)
                ctx.lineWidth = 3
                ctx.strokeStyle = yellow
                ctx.stroke()
            }
            ctx.rotate(c / 60)
        }
        ctx.restore()

        // 基于当前时间获取时、分、秒针的弧度
        const { rh, rm, rs } = getRadian()

        //  时针 - 直线 - 20，65，9
        ctx.save()
        ctx.rotate(rh)
        ctx.beginPath()
        ctx.moveTo(-20, 0)
        ctx.lineTo(65, 0)
        ctx.lineWidth = 9
        ctx.strokeStyle = yellow
        ctx.stroke()
        ctx.restore()

        //  分针 - 直线 - 28，80，4
        ctx.save()
        ctx.rotate(rm)
        ctx.beginPath()
        ctx.moveTo(-28, 0)
        ctx.lineTo(80, 0)
        ctx.lineWidth = 4
        ctx.strokeStyle = yellow
        ctx.stroke()
        ctx.restore()

        //  秒针 - 直线 - -30，88，2
        ctx.save()
        ctx.rotate(rs)
        ctx.beginPath()
        ctx.moveTo(-30, 0)
        ctx.lineTo(88, 0)
        ctx.lineWidth = 2
        ctx.strokeStyle = redB
        ctx.stroke()
        ctx.restore()

        // 圆弧 10
        ctx.save()
        ctx.beginPath()
        ctx.arc(0, 0, 10, 0, Math.PI * 2)
        ctx.fillStyle = redB
        ctx.fill()
        ctx.restore()

        // 还原上一次save 的状态
        ctx.restore()
    }

    // 基于当前时间获取时、分、秒针的弧度
    function getRadian() {
        // 获取当前时间的时分秒 Date
        const date = new Date()

        // 当前小时 getHours
        let h = date.getHours()
        if (h > 12) h -= 12
        // 当前分钟 getMinutes
        let m = date.getMinutes()
        // 当前秒 getSeconds
        let s = date.getSeconds()

        // 时针旋转弧度
        const rh = c * h / 12 + c * m / 12 / 60 + c * s / 12 / 60 / 60
        // 分针旋转弧度
        const rm = c * m / 60 + c * s / 60 / 60
        // 秒针旋转弧度
        const rs = c * s / 60

        // 返回三个弧度
        return { rh, rm, rs }
    }
</script>
</body>
</html>

效果如下：
在这里插入图片描述

V。on
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript Canvas绘制时钟
02-22
JavaScript Canvas绘制时钟
Canvas时钟
candy_tity的博客
11-23 782
canvas可以用极少的代码实现酷炫的功能。 今天tity带大家实现一个简单的时钟效果，先铺代码：<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <title>时钟</title> <style type="text/css"> canvas { di
canvas 做时钟
qq_43233643的博客
01-23 204
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
微信小程序开发之——时钟-Canvas介绍(1)
最新发布
2401_84048554的博客
04-01 944
其实Android开发的知识点就那么多，面试问来问去还是那么点东西。所以面试没有其他的诀窍，只看你对这些知识点准备的充分程度。so，出去面试时先看看自己复习到了哪个阶段就好。当然我也为你们整理好了百度、阿里、腾讯、字节跳动等等互联网超级大厂的历年面试真题集锦。这也是我这些年来养成的习惯，一定要学会把好的东西，归纳整理，然后系统的消化吸收，这样才能极大的提高学习效率和成长进阶。碎片、零散化的东西，我觉得最没有价值的。就好比你给我一张扑克牌，我只会觉得它是一张废纸，但如果你给我一副扑克牌，它便有了它的价值。
canvas时钟
weixin_45970898的博客
09-27 116
已知半径c，和x的角度求点的坐标，求点的坐标相当于求b跟a的值，b=sinx.c a=cosx.c,所有圆上任意点的坐标为（sinx.c,cosx.c） var canvas = document.getElementsByTagName('canvas')[0]; var ctx = canvas.getContext('2d'); // 时钟圆心坐标 var x = canvas.width / 2; var y = canvas.height / 2; var r = 150; fu.
Canvas绘制一个时钟
秃头小桂子
05-11 2199
Canvas绘制一个时钟 Canvas：一个可以使用脚本(通常为JavaScript)在其中绘制图像的 HTML 元素。它可以用来制作照片集或者制作简单(也不是那么简单)的动画，甚至可以进行实时视频处理和渲染。 博客地址：https://xiaofly.cn/post-details?id=627b9c9b5fcf765110cdcb6e 先上效果图： 先创建一个index.html，内容如下： <!-- index.html --> <!DOCTYPE html> <h
canvas时钟效果
08-31
本文主要介绍了canvas实现时钟效果的代码。具有很好的参考价值，下面跟着小编一起来看下吧
canvas制作时钟
11-06
canvas制作时钟
canvas绘制表盘时钟
08-31
本文主要分享了canvas绘制表盘时钟的示例代码。具有很好的参考价值，下面跟着小编一起来看下吧
canvas--时钟
qq_15980201的博客
12-19 334
可以进群领取 WEB前端学习交流群21 598399936         canvas时钟             div {             text-align: center;             margin-top: 15%;         }             var dom = document
Canvas 实现钟表
梓鸿
04-17 197
Canvas 实现钟表 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Canvas Clock</title> </head> <bo...
canvas画时钟
pumpkin_truck的博客
06-04 2479
canvas画时钟 今天我们来学习学习如何使用canvas画时钟 首先我们得了解一下canvas是什么，怎么使用它： Canvas 中文名称叫“画布”，通过 JavaScript 来绘制 2D 图形，是 HTML 5 中新增的元素。 它最大得特点就是绘制它需要使用脚本绘制。canvas拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。 首先在html5中添加canvas元素，规定元素的id ，width,和height，这次的高度和宽度我习惯用js书写。 <canvas id="canvas"&
canvas绘制时钟
qq_41985405的博客
06-07 161
canvas绘制时钟 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content='width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0'></meta> </head&g
Canvas之绘制时钟
summer爱前端
08-18 1317
用canvas画一个时钟玩玩吧，比css+js简单太多了……
用canvas制作一个时钟
jspyth的博客
10-20 2775
我想熟悉一下canvas的使用，参考一个例子做了一个能动态展示当前时刻的canvas时钟。 先看效果： 实现思路： 使用canvas绘图第一步肯定是先获取canvas元素对象，并定义上下文。 var clock = document.getElementById("clock"); clock.style.backgroundColor = "black"; var graph = n...
Canvas 实现时钟
不积跬步无以至千里
02-23 719
本篇文章的所有代码转自 ACdreamers 的《第一个Canvas实例-钟表》 。 一、.获取上下文对象 var cxt = document.getElementById(‘元素名’)
canvas实现时钟
m0_56274171的博客
07-07 689
canvas实现时钟
实现HTML5 Canvas绘制时钟
06-01
好的，下面是一个简单的HTML5 Canvas绘制时钟的示例代码： ``` <!DOCTYPE html> <html> <head> <title>Canvas时钟</title> <style> canvas { border: 2px solid black; } </style> </head> <body> <canvas id="clock" width="200" height="200"></canvas> <script> function drawClock() { // 获取Canvas元素 var canvas = document.getElementById("clock"); var ctx = canvas.getContext("2d"); // 获取Canvas中心点坐标 var centerX = canvas.width / 2; var centerY = canvas.height / 2; // 绘制表盘 ctx.beginPath(); ctx.arc(centerX, centerY, 80, 0, 2 * Math.PI); ctx.strokeStyle = "black"; ctx.stroke(); // 绘制刻度 for (var i = 1; i <= 12; i++) { var angle = i * Math.PI / 6; var x = centerX + 60 * Math.sin(angle); var y = centerY - 60 * Math.cos(angle); ctx.beginPath(); ctx.arc(x, y, 5, 0, 2 * Math.PI); ctx.fillStyle = "black"; ctx.fill(); } // 绘制时针 var now = new Date(); var hour = now.getHours() % 12; var minute = now.getMinutes(); var second = now.getSeconds(); var hourAngle = (hour + minute / 60) * Math.PI / 6; var hourX = centerX + 40 * Math.sin(hourAngle); var hourY = centerY - 40 * Math.cos(hourAngle); ctx.beginPath(); ctx.moveTo(centerX, centerY); ctx.lineTo(hourX, hourY); ctx.strokeStyle = "black"; ctx.stroke(); // 绘制分针 var minuteAngle = minute * Math.PI / 30; var minuteX = centerX + 60 * Math.sin(minuteAngle); var minuteY = centerY - 60 * Math.cos(minuteAngle); ctx.beginPath(); ctx.moveTo(centerX, centerY); ctx.lineTo(minuteX, minuteY); ctx.strokeStyle = "black"; ctx.stroke(); // 绘制秒针 var secondAngle = second * Math.PI / 30; var secondX = centerX + 60 * Math.sin(secondAngle); var secondY = centerY - 60 * Math.cos(secondAngle); ctx.beginPath(); ctx.moveTo(centerX, centerY); ctx.lineTo(secondX, secondY); ctx.strokeStyle = "red"; ctx.stroke(); } // 每秒钟更新时钟 setInterval(drawClock, 1000); </script> </body> </html> ``` 这段代码使用Canvas绘制了一个时钟，并且每秒钟更新一次。你可以将代码复制到一个HTML文件中运行，就可以看到时钟的效果了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值