效果图如下

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

 </head>

 <body>

     <canvas id="canvas" width="500" height="500"></canvas>

 </body>

 <script>

 var canvas = document.getElementById("canvas");

 var can = canvas.getContext("2d");

 function drawClock(c){

     c.clearRect(0,0,500,500);

     var now = new Date();

     var hours = now.getHours();

     var minutes = now.getMinutes();

     var seconds = now.getSeconds();

     hours = hours>12?hours-12:hours;

     hours = hours+minutes/60;

     var time = now.toLocaleString();

     console.log(hours,minutes,seconds);

     c.beginPath();

     c.lineWidth=8;

     c.arc(250,250,200,0,Math.PI*2,false);

     c.stroke();

     for(var i=0;i<12;i++){

         c.save();

         c.lineWidth=5;

         c.translate(250,250);//将起始位置移动到圆心。

         c.rotate(i*30*Math.PI/180);//旋转，这里是画刻度的关键，画刻度的线条每次循环都在一个地方，但是画布旋转了。
　　　　　　　　　　　　　　　　　　　　　　　　就像切香肠时刀的落点不变，每次将香肠往前推。

         c.beginPath();

         c.moveTo(0,-180);

         c.lineTo(0,-195);

         c.closePath();

         c.stroke();

         c.restore();

     }

     for(var i=0;i<60;i++){

         c.save();

         c.lineWidth= 3;

         c.translate(250,250);

         c.rotate(6*i*Math.PI/180);

         c.beginPath();

         c.moveTo(0,-190);

         c.lineTo(0,-195);

         c.closePath();

         c.stroke();

         c.restore();

     }

     //表盘中心

     c.lineWith=1;

     c.beginPath();

     c.arc(250,250,4,0,360,false);

     c.fill();

     c.closePath();

     //时针

     c.save();

     c.translate(250,250);

     c.rotate(hours*30*Math.PI/180);

     c.lineWidth = 7;

     c.beginPath();

     c.moveTo(0,15);

     c.lineTo(0,-120);

     c.stroke();

     c.closePath();

     c.restore();

     //分针

     c.save();

     c.translate(250,250);

     c.rotate(minutes*6*Math.PI/180);

     c.lineWidth=3;

     c.moveTo(0,15);

     c.lineTo(0,-135);

     c.stroke();

     c.restore();

     //秒针

     c.save();

     c.translate(250,250);

     c.rotate(seconds*6*Math.PI/180);

     c.lineWidth=1;

     c.moveTo(0,15);

     c.lineTo(0,-160);

     c.stroke();

     c.beginPath();

     c.strokeStyle="red";

     c.fillStyle="white";

     c.arc(0,-145,5,0,180,false);

     c.fill();

     c.stroke();

     c.closePath();

     c.beginPath();

     //判断秒数能否被5整除，能整除表示大刻度，反之为小刻度

         if(seconds%5==0){

             c.moveTo(0,-180);

             c.lineTo(0,-195);

             c.lineWidth=5;

         }else{

             c.moveTo(0,-190);

             c.lineTo(0,-195);

             c.lineWidth=3;

         }

         //当秒针走到某个刻度时，相应的边为红色。

         c.strokeStyle="red";

         c.stroke();

         c.closePath();

     c.restore();

     //写时间

     c.font="15px 黑体"

     c.fillText(time,160,150);

 }

 setInterval("drawClock(can)",1000);

 </script>

 </html>

canvas画一个时钟的更多相关文章

  1. 深夜，用canvas画一个时钟

    深夜,用canvas画一个时钟 查看demo 这几天准备阿里巴巴的笔试,可以说已经是心力交瘁,自从阿里和蘑菇街的内推被刷掉之后,开始越来越怀疑起自己的能力来,虽然这点打击应该是微不足道的.毕竟校招在刚 ...

  2. 玩转html5（四）----使用canvas画一个时钟（可以动的哦！）

    先给个效果图,我画的比较丑,大家可以自己美化一下, 直接上代码: <!DOCTYPE html> <meta charset="utf-8"> <ht ...

  3. 用canvas画一个时钟

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. 10分钟，利用canvas画一个小的loading界面

    首先利用定义下canvas得样式 <canvas width="1024" height="720" id="canvas" styl ...

  5. 用Canvas画一个刮刮乐

    Canvas 通过 JavaScript 来绘制 2D图形.Canvas 是逐像素进行渲染的.开发者可以通过javascript脚本实现任意绘图.Canvas元素是HTML5的一部分,允许脚本语言动态 ...

  6. 利用canvas画一个实时时钟

    先放一张效果图: 下面是源代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...

  7. 用canvas绘制一个时钟

    实现一个时钟的绘制和时间的显示 一,首先是页面的搭建html部分以及一点点的css代码,因为css这块用的比较少,所以就没有单独出来: <!DOCTYPE html> <html l ...

  8. 通过H5的新标签canvas做出一个时钟的全过程，希望对初学者有帮助

    最近学习了H5中的一个新标签canvas并且用它做出了一个时钟,最下面是成品图像,还不错吧,这只是我学习中的一个小demo,做得有点粗糙,但终究是做出来了,以后再写自己的网页主页再做一个好看点放上去. ...

  9. html5入门：教你用canvas写一个时钟

    今天的时间比较充裕,心血来潮,为大家分享一个html5的小例子,希望对刚学html5或者是没学html5正准备学的“童鞋们”展示一个小案例,希望对你们的学习有帮助!高手嘛!请跳过吧! 好了,闲话少数, ...

随机推荐

  1. 前端页面中如何在窗口缩放时让两个div始终在同一行显示

    直接贴代码吧 先总结一下吧  有两种方法 一    最外层设置一个大div  给这个大div固定的宽度和高度 给里面两个小div 设置浮动  设置宽高 <!DOCTYPE html> &l ...

  2. Linux.杀毒.Centos安装杀毒软件Clam

    Linux系统用了几年, 甚少中毒 但前不久在阿里云的服务器被种马,折腾了几周才解决干净 感觉还是装个杀毒/马软件定期扫一扫比较稳妥, 这个Clam是免费的, 安装和配置办法记录如下: 已验证适用环境 ...

  3. 基于vip和twemproxy代理实现redis集群的无感知弹性扩容

    目标是实现redis集群的无感知弹性扩容 关键点 1是无感知,即对redis集群的用户来说服务ip和port保持不变 2.弹性扩容,指的是在需要时刻可以按照业务扩大redis存储容量. 最原始的twe ...

  4. mybatis 分页问题 (个人认为算是个bug)

    问题描述:相同的查寻条件, 分页显示的结果和.net版本的分页结果数量一样,排序不一样, 不同的页有相同的数据.比如:第2面和第3页都有同一条相同的数据. 核心代码: //自己实现 int total ...

  5. linux学习（五）系统目录结构，ls命令，文件类型，alias

    一.系统目录结构 在我们的根目录下,有这样一些文件夹 /bin /sbin /usr/bin /usr/sbin /sbin一般都是root用户用的 /boot 系统启动相关的,grup就放在这里,这 ...

  6. C++ 随机生成一个(0,1)之间的小数

    double p; ]; memset(s,,sizeof(s)); s[]='; s[]='.'; ;i<;i++) { s[i]=rand()%+'; } p=atof(s); cout & ...

  7. 集群配置虚拟主机及部署Hadoop集群碰到的问题

    配置集群方案 Ubuntu下的配置apache虚拟主机方案: 对其中的Master节点配置虚拟主机,可以通过Chrome浏览器访问目录. 安装虚拟主机之前,先安装Apache2 sudo apt-ge ...

  8. Hdu 1698(线段树 区间修改 区间查询)

    In the game of DotA, Pudge's meat hook is actually the most horrible thing for most of the heroes. T ...

  9. sed命令详解 vim高级技巧 shell编程上

    第1章 sed命令详解 1.1 查找固定的某一行 1.1.1 awk命令方法 [root@znix ~]# awk '!/oldboy/' person.txt 102,zhangyao,CTO 10 ...

  10. js中的浅复制和深复制

    浅复制:浅复制是复制引用,复制后的引用都是指向同一个对象的实例,彼此之间的操作会互相影响 深复制:深复制不是简单的复制引用,而是在堆中重新分配内存,并且把源对象实例的所有属性都进行新建复制,以保证深复 ...