效果图如下

 <!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. Linux命令用法

    1.cut http://www.cnblogs.com/dong008259/archive/2011/12/09/2282679.html 2.sed http://www.cnblogs.com ...

  2. 使用 Hadoop 进行语料处理（面试题）

    原创播客,如需转载请注明出处.原文地址:http://www.cnblogs.com/crawl/p/7751741.html ------------------------------------ ...

  3. Android 6.0运行时权限

    一.Runtime Permissions Android 6.0在手机安全方面做的一个处理就是增加了运行时权限(Runtime Permissions). 新的权限机制更好的保护了用户的隐私,Goo ...

  4. 一行python的强大功能

    能够把自身代码打印出来的程序,叫做Quine. 下面是python的一行quine: _='_=%r;print _%%_';print _%_ 有人说有分号不算一行,无分号版: print(lamb ...

  5. input file选择图片后 预览

    很多前端都选择用插件来实现图片预览,这个小功能也可以很简单的用jQuery来实现 简单的jQuery实现input file选择图片后,可以预览图片的效果 简单的HTML代码: <div> ...

  6. Leetcode题解（六）

    21.Merge Two Sorted Lists 题目 直接上代码: class Solution { public: ListNode *mergeTwoLists(ListNode *l1, L ...

  7. Windows环境下多线程编程原理与应用读书笔记（7）————事件及其应用

    <一>事件 事件主要用于线程间传递消息,通过事件来控制一个线程是处于执行状态还是处于挂起状态. 事件和互斥量之间的差别: 事件主要用于协调两个或者多个线程之间的动作,使其协调一致,符合逻辑 ...

  8. CodeForces - 385C Bear and Prime Numbers (埃氏筛的美妙用法)

    Recently, the bear started studying data structures and faced the following problem. You are given a ...

  9. KiKi's K-Number

    KiKi's K-Number Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Tot ...

  10. 关于php的命名空间

    php定义命名空间要使用namespace关键字,例:namespace Database 使用命名空间中的类要使用use关键字,也可以在use后面加as给类取别名,例:use Database\SQ ...