html5：canvas实现炫酷时钟

最新推荐文章于 2024-07-02 22:34:09 发布
最新推荐文章于 2024-07-02 22:34:09 发布
阅读量752 收藏 8
点赞数 1
文章标签： html5 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/critans/article/details/127820723
版权

目录

 实现如图的时钟

        知识点：

        具体思路：

     具体结构样式：

js代码（注释详解）：

完整代码

 实现如图的时钟

        知识点：

                <canvas>标签，以及附带的方法、属性

        具体思路：

                  1.使用canvas的.arc()方法实现每毫秒时钟进度时分秒的绘制

                  2.通过定时器每一毫秒绘制一次时钟，实现时钟的动画效果

     具体结构样式：


<style>
        * {
            margin: 0;
            padding: 0;
            background-color: rgb(37, 57, 78);
        }
        div {
            margin: 100px auto;
            width: 800px;
            height: 800px;
        }
</style>
<body>
    <div>
        <canvas width="800" height="800" style="background-color: rgb(37, 57, 78);"></canvas>
    </div>
</body>

js代码（注释详解）：

<script>
    //获取画板
    var myCanvas = document.getElementsByTagName("canvas")[0];
    // 获取画笔
    var draw = myCanvas.getContext("2d");
    function drawClock() {
        // 绘制前首先清除画布，否则会造成与之前绘制的图形重合导致模糊
        draw.clearRect(0, 0, myCanvas.width, myCanvas.height)
        // 取当前时间  时分秒毫秒
        var now = new Date();
        var miniSec = now.getMilliseconds();
        var seconds = now.getSeconds();
        var minutes = now.getMinutes();
        var hours = now.getHours();
        // 将获取到的时间字符串设置为标准的十分秒毫秒时间格式即00：00：00：000
        miniSec = miniSec < 10 ? "00" + miniSec : miniSec < 100 ? "0" + miniSec : miniSec;
        seconds = seconds < 10 ? "0" + seconds : seconds;
        minutes = minutes < 10 ? "0" + minutes : minutes;
        hours = hours < 10 ? "0" + hours : hours;
        // 获取当前 时/分/秒 各占表盘度数的比例
        var secondDeg = seconds * 6 + miniSec * 6 / 1000;
        var minuteDeg = minutes * 6 + seconds / 10;
        var hourDeg = hours % 12 * 30 + minutes / 2;
        // 通过截取字符串的方法获得我们所需的日期字符串
        var dayTime = now.toString().slice(0, 16);
        // 获取完整的时间显示字符串
        var clockTime = hours + ":" + minutes + ":" + seconds + ":" + miniSec;
        // 设置渐变色 以及线条样式
        var grad = draw.createLinearGradient(0, 0, 800, 800);
        grad.addColorStop(0, 'rgb(0,255,255)')
        grad.addColorStop(0.5, "rgb(173, 204, 230)")
        grad.addColorStop(1, "aliceblue")
        draw.lineWidth = 40;
        // 设置绘制的文本以及文本样式
        draw.textAlign = "center";
        draw.fillStyle = grad;
        draw.font = "bold 30px 微软雅黑";
        draw.fillText(dayTime, 400, 380);
        draw.fillText(clockTime, 400, 430);

        // 将时/分/秒 各占表盘度数的比例存在数组中
        var three = [secondDeg, minuteDeg, hourDeg];
        // 遍历使用数组，绘制时/分/秒的进度
        for (var i = 0; i < three.length; i++) {
            // 首先绘制灰色的路径
            draw.strokeStyle = "rgb(111, 112, 117)";
            draw.shadowBlur = 0;
            draw.beginPath();
            draw.arc(400, 400, 180 + i * 80, 0, Math.PI * 2);
            draw.stroke();
            draw.closePath();
            // 绘制进度，并且使用渐变色
            draw.shadowColor = "rgb(173, 204, 230)";
            draw.shadowBlur = 10;
            draw.beginPath();
            draw.strokeStyle = grad;
            draw.arc(400, 400, 180 + i * 80, -Math.PI / 2, Math.PI / 180 * three[i] - Math.PI / 2, false);
            draw.stroke();
            draw.closePath();
        }
    }
    // 初始化时钟样式
    drawClock();
    // 使用定时器实现时钟进度的变化
    setInterval(drawClock, 1)
</script>

完整代码

<!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>
        * {
            margin: 0;
            padding: 0;
            background-color: rgb(37, 57, 78);
        }
        div {
            margin: 100px auto;
            width: 800px;
            height: 800px;
        }
    </style>
</head>

<body>
    <div>
        <canvas width="800" height="800" style="background-color: rgb(37, 57, 78);"></canvas>
    </div>
</body>
<script>
    //获取画板
    var myCanvas = document.getElementsByTagName("canvas")[0];
    // 获取画笔
    var draw = myCanvas.getContext("2d");
    function drawClock() {
        // 绘制前首先清除画布，否则会造成与之前绘制的图形重合导致模糊
        draw.clearRect(0, 0, myCanvas.width, myCanvas.height)
        // 取当前时间  时分秒毫秒
        var now = new Date();
        var miniSec = now.getMilliseconds();
        var seconds = now.getSeconds();
        var minutes = now.getMinutes();
        var hours = now.getHours();
        // 将获取到的时间字符串设置为标准的十分秒毫秒时间格式即00：00：00：000
        miniSec = miniSec < 10 ? "00" + miniSec : miniSec < 100 ? "0" + miniSec : miniSec;
        seconds = seconds < 10 ? "0" + seconds : seconds;
        minutes = minutes < 10 ? "0" + minutes : minutes;
        hours = hours < 10 ? "0" + hours : hours;
        // 获取当前 时/分/秒 各占表盘度数的比例
        var secondDeg = seconds * 6 + miniSec * 6 / 1000;
        var minuteDeg = minutes * 6 + seconds / 10;
        var hourDeg = hours % 12 * 30 + minutes / 2;
        // 通过截取字符串的方法获得我们所需的日期字符串
        var dayTime = now.toString().slice(0, 16);
        // 获取完整的时间显示字符串
        var clockTime = hours + ":" + minutes + ":" + seconds + ":" + miniSec;
        // 设置渐变色 以及线条样式
        var grad = draw.createLinearGradient(0, 0, 800, 800);
        grad.addColorStop(0, 'rgb(0,255,255)')
        grad.addColorStop(0.5, "rgb(173, 204, 230)")
        grad.addColorStop(1, "aliceblue")
        draw.lineWidth = 40;
        // 设置绘制的文本以及文本样式
        draw.textAlign = "center";
        draw.fillStyle = grad;
        draw.font = "bold 30px 微软雅黑";
        draw.fillText(dayTime, 400, 380);
        draw.fillText(clockTime, 400, 430);

        // 将时/分/秒 各占表盘度数的比例存在数组中
        var three = [secondDeg, minuteDeg, hourDeg];
        // 遍历使用数组，绘制时/分/秒的进度
        for (var i = 0; i < three.length; i++) {
            // 首先绘制灰色的路径
            draw.strokeStyle = "rgb(111, 112, 117)";
            draw.shadowBlur = 0;
            draw.beginPath();
            draw.arc(400, 400, 180 + i * 80, 0, Math.PI * 2);
            draw.stroke();
            draw.closePath();
            // 绘制进度，并且使用渐变色
            draw.shadowColor = "rgb(173, 204, 230)";
            draw.shadowBlur = 10;
            draw.beginPath();
            draw.strokeStyle = grad;
            draw.arc(400, 400, 180 + i * 80, -Math.PI / 2, Math.PI / 180 * three[i] - Math.PI / 2, false);
            draw.stroke();
            draw.closePath();
        }
    }
    // 初始化时钟样式
    drawClock();
    // 使用定时器实现时钟进度的变化
    setInterval(drawClock, 1)
</script>

</html>

critans
关注
html炫酷动态时钟代码,js动态炫酷数字时钟
weixin_34781110的博客
06-05 1541
这是一款使用js和CSS制作的动态炫酷数字时钟。该js数字时钟采用LED数字时钟样式，效果十分逼真。使用方法HTML结构该js数字时钟的HTML结构如下：CSS样式为该js数字时钟添加下面的css样式。.clock {height:200px;position:absolute;top:50%;left:50%;width:900px;margin-left:-450px;margin-top:-...
使用Canvas HTML5画出时钟
m0_65627447的博客
11-21 1031
HTML5 Canvas画时钟
HTML5 超级炫酷电子时钟
02-01
HTML5 超级炫酷电子时钟， 显示日期，时间和周几，代码简洁
14款超时尚的HTML5时钟动画
weixin_34212762的博客
12-28 360
时钟动画在网页应用中也非常广泛，在一些个人博客中，我们经常会看到一些相当个性化的HTML5时钟动画。今天我们向大家分享了14款形态各异的超时尚HTML5时钟动画，其中有圆盘时钟、3D时钟、个性化时钟等，强大的HTML5为时钟动画增添了不少精彩，希望能给大家带来帮助。 1、可爱的CSS3圆盘时钟动画 今天要分享的也是一款可爱的CSS3圆盘时钟动画，时钟背景是乳白色的，显得非常干净，另外，时钟也可...
基于Canvas的Html5多时区动态时钟实战
最新发布
夜郎King的博客
07-02 4724
本文以Canvas为基础，支持多时区的多时钟的动态Web展示为例实现一种在Html5上的电子钟展示方法。通过本文可以了解Canvas的详细用法，掌握基本的文本绘制、样式控制、属性管理的基本知识。
炫酷时钟html
本人喜欢编程（c/c++/嵌入式/单片机硬件制作）、听音乐、偶尔看电影、看书、爱研究、有好奇心
10-01 1572
html 炫酷时钟
HTML炫酷时钟 动态 js调用
09-04
HTML炫酷时钟 动态 js调用 做网页可以放在后台的 顶部做在线时间 和北京时间一致，动态一秒一秒的 跳动 看起来非常霸气 分享给大家
大神纯HTML5，无图片无任何js痕迹打造炫酷高档时钟特效！
weixin_34162228的博客
04-06 442
需要源码请评论后加前端学习群470593776大神纯HTML5，无图片无任何js痕迹打造炫酷高档时钟特效！课题大纲：纯HTML5、css3打造炫酷时钟特效，脱离js后，需要我们更多的思考，用css3实现的逻辑，对于时钟的布局的绘制，以及延时属性的使用，总而言之，对于懂的人来说，这或许很简单，但是对于不懂html5新特性的人来说，这也是一个值得研究的特效，包涵了不少的HTML5知识点，以及对于一些小...
用HTML5的canvas实现一个炫酷时钟效果
01-21
那么首先在这个页面里面我使用了两个canvas，一个用来绘制静态的时钟表盘和刻度，另一个用来绘制时钟的三个指针，然后用定位让他们重合到一起。然后这里没什么好说的，下面附上代码。 JavaScript Code复制内容到剪贴...
基于Html5-canvas炫酷的数字时钟.zip
02-13
这个"基于Html5-canvas炫酷的数字时钟.zip"文件很可能包含了一个使用HTML5 Canvas实现的创新数字时钟示例。在这个项目中，开发者可能利用了Canvas的绘图功能来创建一个视觉上吸引人的时钟界面，它能够实时更新时间，...
h5，canvas实现时钟.zip
03-20
总结来说，"h5，canvas实现时钟"是一个结合了HTML5 Canvas API、数学运算、颜色处理和动画技巧的实例。通过学习和实践这个项目，开发者不仅可以深入理解Canvas的绘图机制，还能提升动态效果和用户体验的设计能力。
HTML5模拟时钟
11-13
用HTML5和CSS模拟时钟，小白学习的好例子，代码含注释。
用html实现炫酷罗马时钟
01-08
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200430141647148.gi ## 炫酷罗马时钟 我们看一下运行效果 这是代码可以复制 罗马时钟 * { margin: 0; padding: 0; } html, body { width: 100%; height: 100%; background-color: #000; o
简洁美观的Html5时钟
03-31
通过用html+css+js写出来的简洁美观的时钟，适合新入门web前端用户学习，没有任何第三方的js，纯html + css + js 的时钟
HTML5模拟时钟jQuery插件.zip
07-05
HTML5模拟时钟jQuery插件
html5 canvas云粒子数字时钟动画特效
11-06
html5 canvas云粒子数字时钟动画特效 html5 canvas云粒子数字时钟动画特效
vue+canvas实现炫酷时钟效果的倒计时插件（已发布到npm的vue2插件，开箱即用）
01-19
其实，实现效果的逻辑跟vue没有关系，只要读懂canvas如何实现效果的这部分逻辑就可以了 　canvas动画的原理：利用定时器，给定合理的帧数，不断的清除画布，再重绘图形，即呈现出动画效果。　 让我们先看下效果 　...
教你五步制作精美的HTML时钟
weixin_30641465的博客
11-17 511
学了一段时间的HTML、CSS和JS后，给大家做一款漂亮的不像实力派的HTML时钟，先看图：涉及到的知识点有： CSS3动画、DOM操作、定时器、圆点坐标的计算（好多人是不是已经还给自己的老师了~）接下来，我们用5步来制作它 step1、准备HTML 首先，我们需要准备HTML结构，背景、表盘、指针（时针、分针、秒针）、数字。<div id="clock"> &...
通过Html5新元素＜canvas＞绘制时钟
hua_0708的博客
07-20 179
HTML5 <canvas> 元素用于图形的绘制，通常是JavaScript来完成. 效果如下： html和css代码就不发了，就一个div，给定一定的高度和宽度，然后在div里面利用<canvas>新元素通过js来完成，期间有点麻烦。 js代码如下： <script> /** @type{HTMLCanvasElement}*/ var canvas = document.getElementById('canvas');.
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值