使用canvas画一个可以动的时钟

最新推荐文章于 2022-11-29 20:00:00 发布
最新推荐文章于 2022-11-29 20:00:00 发布
阅读量523 收藏
点赞数
分类专栏： 页面相关

先给个效果图，画的比较丑，大家可以自己美化一下，




直接上代码：

[html]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. <!DOCTYPE html>  
  2. <meta charset="utf-8">  
  3. <html>  
  4.    <body>  
  5.       <canvas  width="500" height="500" id="clock" >    
  6.              您的浏览器不支持canvas  
  7.       </canvas>  
  8.       <script>  
  9.            //获取画布  
  10.            var clock=document.getElementById('clock');  
  11.            //设置绘图环境  
  12.            var cxt=clock.getContext('2d');    
  13.   
  14.        function drawClock(){      
  15.            //清除画布  
  16.            cxt.clearRect(0,0,500,500);  
  17.            //获取时间，  
  18.             var now =new Date();  
  19.             var second =now.getSeconds();  
  20.             var minute =now.getMinutes();  
  21.             var hour1 =now.getHours();  
  22.             //将24小时进制转为12小时，且为浮点型  
  23.             var hour=hour1+minute/60;  
  24.             hour=hour>12 ?hour-12:hour;  
  25.             //获取全部时间  
  26.             var time=now.toLocaleString( );  
  27.               
  28.            //表盘  
  29.                 //开始新路径  
  30.                 cxt.beginPath();  
  31.                 cxt.lineWidth=8;  
  32.                 cxt.strokeStyle="blue";  
  33.                 //路径函数 x,y,r,角度范围,顺时针/逆时针  
  34.                 cxt.arc(250,250,200,0,360,false);  
  35.                 cxt.stroke();   
  36.                 cxt.closePath();  
  37.             //刻度,利用旋转  
  38.                //时刻度  
  39.                 for(var i=0;i<12;i++){  
  40.                     //保存当前状态  
  41.                     cxt.save();  
  42.                     //刻度粗细  
  43.                      cxt.lineWidth=5;  
  44.                     //刻度颜色  
  45.                     cxt.strokeStyle="black"  
  46.                     //设置00点,以画布中心为00  
  47.                     cxt.translate(250,250);  
  48.                     //设置旋转角度 参数是弧度，角度 0--360 弧度角度*Math.PI/180  
  49.                     cxt.rotate(i*30*Math.PI/180);  
  50.                     cxt.beginPath();  
  51.                     //刻度起始点  
  52.                     cxt.moveTo(0,-180);  
  53.                     //刻度结束点  
  54.                     cxt.lineTo(0,-195);  
  55.                     cxt.closePath();  
  56.                     cxt.stroke();  
  57.                     //将旋转后的图片返回原画布  
  58.                     cxt.restore();  
  59.                 }  
  60.   
  61.                //分刻度  
  62.                  for(var i=0;i<60;i++){  
  63.                     //保存当前状态  
  64.                     cxt.save();  
  65.                     //刻度粗细  
  66.                     cxt.lineWidth=3;  
  67.                     //刻度颜色  
  68.                     cxt.strokeStyle="black"  
  69.                     //设置00点,以画布中心为00  
  70.                     cxt.translate(250,250);  
  71.                     //设置旋转角度 参数是弧度，角度 0--360 弧度角度*Math.PI/180  
  72.                     cxt.rotate(i*6*Math.PI/180);  
  73.                     cxt.beginPath();  
  74.                     //起始点  
  75.                     cxt.moveTo(0,-188);  
  76.                     cxt.lineTo(0,-195);  
  77.                     cxt.closePath();  
  78.                     cxt.stroke();  
  79.                     //将旋转后的图片返回原画布  
  80.                     cxt.restore();  
  81.                 }  
  82.             //表盘中心  
  83.                 cxt.beginPath();  
  84.                 cxt.lineWidth=1;  
  85.                 cxt.strokeStyle="red";  
  86.                 cxt.fillStyle="red";  
  87.                 //路径函数 x,y,r,角度范围,顺时针/逆时针  
  88.                 cxt.arc(250,250,4,0,360,false);  
  89.                 cxt.fill();  
  90.                 cxt.stroke();   
  91.                 cxt.closePath();  
  92.             //时针  
  93.                 //保存当前状态  
  94.                  cxt.save();  
  95.                  cxt.lineWidth=5;  
  96.                  cxt.strokeStyle="black";  
  97.                  //设置异次元空间00点  
  98.                  cxt.translate(250,250);  
  99.                  //设置旋转角度 参数是弧度，角度 0--360 弧度角度*Math.PI/180  
  100.                  cxt.rotate(hour*30*Math.PI/180);  
  101.                  cxt.beginPath();       
  102.                  cxt.moveTo(0,-120);  
  103.                  cxt.lineTo(0,10);  
  104.                  cxt.closePath();  
  105.                  cxt.stroke();  
  106.                  cxt.restore();  
  107.             //分针  
  108.                  cxt.save();  
  109.                  cxt.lineWidth="3";  
  110.                  cxt.strokeStyle="black";  
  111.                  cxt.translate(250,250);  
  112.                  cxt.rotate(minute*6*Math.PI/180);  
  113.                  cxt.beginPath();       
  114.                  cxt.moveTo(0,-150);  
  115.                  cxt.lineTo(0,15);  
  116.                  cxt.closePath();  
  117.                  cxt.stroke();  
  118.                  cxt.restore();  
  119.             //秒针  
  120.                  cxt.save();  
  121.                  cxt.lineWidth="1.5";  
  122.                  cxt.strokeStyle="red";  
  123.                  cxt.translate(250,250);  
  124.                  cxt.rotate(second*6*Math.PI/180);  
  125.                  cxt.beginPath();       
  126.                  cxt.moveTo(0,-160);  
  127.                  cxt.lineTo(0,20);  
  128.                  cxt.closePath();  
  129.                  cxt.stroke();  
  130.                  //秒针前端小点  
  131.                  cxt.beginPath();  
  132.                  //外环为红色  
  133.                  cxt.strokeStyle="red";  
  134.                  //灰色填充  
  135.                  cxt.fillStyle="gray";  
  136.                  cxt.arc(0,-145,4,0,360,false);  
  137.                    cxt.fill();  
  138.                  cxt.closePath();  
  139.                  cxt.stroke();  
  140.                  cxt.restore();  
  141.             //表盘中心  
  142.                 cxt.beginPath();  
  143.                 cxt.lineWidth=1;  
  144.                 //外环为红色  
  145.                 cxt.strokeStyle="red";  
  146.                 //灰色填充  
  147.                 cxt.fillStyle="gray";  
  148.                 //路径函数 x,y,r,角度范围,顺时针/逆时针  
  149.                 cxt.arc(250,250,4,0,360,false);  
  150.                 cxt.fill();  
  151.                 cxt.stroke();   
  152.                 cxt.closePath();  
  153.             //写时间      
  154.                 cxt.font="15px 黑体 ";  
  155.                  cxt.fillStyle="black";  
  156.                 //实心字  
  157.                 cxt.fillText(time,160,150);  
  158.            }        
  159.            //使用setInterval(代码，毫秒时间)使时钟转起来;  
  160.            drawClock();  
  161.            setInterval(drawClock,1000);  
  162.   
  163.   
  164.       </script>  
  165.    </body>  
  166. </html>  
sunqian_happy
关注
专栏目录
JavaScript canvas动画实现时钟效果
11-21
表框是通过`arc`方法画出一个圆圈，`stroke`完成描边，进一步完善时钟的外观。 这个时钟动画示例展示了Canvas API的基本用法，包括绘图路径、变换、颜色和线条样式等。通过理解并实践这段代码，开发者可以掌握在...
canvas画布制作动态时钟
最新发布
qq_21948601的博客
04-07 657
canvas制作动态
【Canvas】js用canvas绘制一个钟表时钟动画效果
落叶随风将要去远方，看沿途的风景回忆一场...
11-29 1542
学习JavaScript的看过来，有没有兴趣用Canvas画图呢，可以画很多有趣的事物，自由发挥想象，收获多多哦，旋转角度绘图这个重点掌握到了吗，这里有一个例子，如何用canvas画钟表时钟动图效果，接下来开始讲，边学边做。
用canvas制作一个实时钟表，指针随时间改变而转动
lcplayer的博客
09-23 627
利用canvas绘制的动态实时钟表，包含有钟表指针的绘制函数，随着时间变化指针会跳动
Canvas绘制动态时钟
Studious_S的博客
05-05 470
Canvas绘制时钟 话不多说，直接上代码. //HTML页面部分 <!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-s
canvas实现动态时钟
joyouscola的博客
04-01 443
HTML5之前，为了达到页面绚丽多彩的效果，我们很多情况下都是借助“图片”来实现。不过使用图片这种方式，都是以“ ”低性能为代价的。由于图片体积大、下载速度慢等原因，因此为了应对日渐复杂的Web应用开发，W3C在HTML5标准中引入了Canvas这一门技术。 Canvas又称为“画布”，是HTML5的核心技术之一。我们常说的Canvas技术，指的就是使用Canvas元素结合JavaScript来绘制各种图形的技术。 Canvas是基于“位图”的，适用于像素处理和动态渲染，图形放大会影响质量。SVG是基于“矢
基于canvas的粒子时钟动画
10-25
基于canvas的粒子时钟动画，用浏览器打开就能看到效果
HTML5 Canvas 动画时钟
04-08
首先，Canvas API 提供了 `canvas` 元素，它是一个矩形区域，可以通过 JavaScript 来绘制图像、线条、文本等。在 `clock.html` 文件中，你可能会看到一个 `canvas` 元素，它的 ID 可能是 "clock"，用于绑定绘图操作...
html5 canvas画布绘制圆形时钟代码
09-08
在上面的代码中，我们创建了一个宽高均为300像素的canvas元素，并引用了一个名为`clock.js`的JavaScript文件，该文件将包含实现时钟绘制的逻辑。 接下来，我们需要在`clock.js`中编写JavaScript代码。这里，我们将...
Html5的Canva绘制动态时钟显示当前时间！！！（附源码）
yingshuangtu的博客
08-13 1095
前言 canvas设计一个显示当前时间的时钟 实现情况 思路 想让canvas绘制的东西动起来，最直接的办法就是不停的进行重绘，可能刚开始有些人会担心效率的问题，害怕代码过长冗余，可读性差的问题，实际上将绘制目标封装在函数中，然后放置函数在定时器中，每秒钟调用一次就可以实现 ， 首先是创建绘画环境 var canvas = document.getElementById("canvas"); var context = canvas.getContext('2d'); 获取当前系统时间，使用的是Data
原生JS的Canvas写一个实时的时钟效果(含源码)
izl040905的博客
11-16 477
相信学了HTML5新增的Canvas的小伙伴都非常感叹其功能之强大，可以帮助我们做许多关于画布的绘画以及对图形的操作，那么今天就带大家实现一个简单实时的时钟效果，含有源码和注释。
炫酷动态时钟——canvas
weixin_48833991的博客
06-24 978
今天分享一下用canvas做的动态时钟，原理和代码都很简单，不过还是可以做出很炫酷的效果，想学习canvas的小伙伴可以看一下。 效果图 HTML5的canvas的知识点 看源代码前先看一下canvas的基本知识点： 首先，找到 canvas 元素: var c=document.getElementById(“myCanvas”); 然后，创建 context 对象： var ctx=c.getContext(“2d”); getContext(“2d”) 对象是内建的 HTML5 对象，拥有多种绘制路
canvas实现时钟转动
T_ambition的博客
07-27 489
1、找到canvas的中心，画出表心，以及表款 2、获取当前时间，并根据时间画出时针，分针，秒针，还有刻度 3、使用定时器，没过一秒获取新的时间，并重新绘图，达到时钟转动的效果 1、表心和表框 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"&g...
玩转html5（四）----使用canvas画一个时钟（可以动的哦！）
04-29 8854
先给个效果图，我画的比较丑，大家可以自己美化一下， 直接上代码： 您的浏览器不支持canvas //获取画布 var clock=document.getElementById('clock'); //设置绘图环境
canvas实现时钟特效
weixin_45665589的博客
04-27 1539
这两天在重读《JavaScript 高级程序设计第 4 版》，感觉有了一些新的认识和发现，收获还是挺多的。今天刚刚好阅读到动画和canvas这部分，书中给的一个小示例是一个闹钟 当时觉得挺有意思的，就想着自己着手也实现一个类似的特效（本来准备写论文的，前两天感冒了 ，有点不舒服，进度有点迟缓，不过这不影响写代码(▽)） 效果图 实现思路 闹钟的实现思路也比较容易，简单介绍一下思路。先创建一个大圆（闹钟的外层），闹钟的刻度是单个线条，实现单个线条也比较简单，主要就是moveTo和lineTo的使用，结合一
canvas画动态时钟
weixin_33800463的博客
06-21 98
用canvas画动态时钟 HTML代码 <body> <div class="box"> <span id="hour"></span>: <span id="minute"></span>: <span id="second"&g...
html5绘制会动的时钟,HTML5的绝活:巧用Canvas制作会动的时钟
weixin_42572134的博客
07-02 257
[javascript] view plaincopy$(function() {var canvas=document.getElementById("mycanvas");var context=canvas.getContext("2d");context.strokeStyle="rgb(255, 0, 0)";context.lineWidth=10;context.shadowColo...
Canvas实现会动的表钟
cxixi0222的博客
03-13 145
<body> <canvas id="canvas" width="400" height="400" style="border:1px dashed gray;"></canvas> </body> <script type="text/javascript"> window.onload = function () ...
使用Canvas实现粒子时钟效果与数字动画
粒子时钟效果是一种基于 canvas 的图形效果，通过绘制大量小圆点来构成数字的形状，形成一个时钟的效果。这种效果可以应用于各种场景，例如游戏、动画、广告等。 在实现粒子时钟效果之前，需要了解 canvas 的基本...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值