效果图如下

 <!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. [在线Demo]使用Hibernate多租户实现SaaS服务

    上一篇文章 基于Hibernate实现多租户(Multi-Tendency)功能简单介绍了利用Hibernate的多租户功能提供SaaS服务的方法,但其中有很多不足,后来都得到了解决. 我尝试过抽取实 ...

  2. C GOTO使用示例

    GOTO虽然会破坏程序的结构,使用代码可读性变差,但是GOTO依然还是有可用的地方 #include <stdio.h>#include <stdbool.h> int mai ...

  3. 基于webuploader.js的单图片上传封装

    HTML代码 <div class="manageImgUp">点击图片上传</div> <div class="manageImgUpLc ...

  4. LeetCode 245. Shortest Word Distance III （最短单词距离之三） $

    This is a follow up of Shortest Word Distance. The only difference is now word1 could be the same as ...

  5. LeetCode 73. Set Matrix Zeros（矩阵赋零）

    Given a m x n matrix, if an element is 0, set its entire row and column to 0. Do it in place. click ...

  6. java中matches的用法

    在java中,时常会用到查看一个字符串是否是数字,这时就可以用到matches()函数. 具体实例如下: public boolean string_matches(String amatch) { ...

  7. 基于Vue.js的大型报告页项目实现过程及问题总结（一）

    今年5月份的时候做了一个测评报告项目,需要在网页正常显示的同时且可打印为pdf,当时的技术方案采用jquery+template的方式,因为是固定模板所以并没有考虑报告的模块化区分,九月底产品提出新的 ...

  8. TIDB 参数解释

    地址:https://github.com/pingcap/docs-cn/blob/master/op-guide/configuration.md#tidb TiDB --store 用来指定 T ...

  9. sqoop1.9.7安装和使用

    安装1.下载sqoop1.9.7.地址: http://www.apache.org/dyn/closer.lua/sqoop/1.99.72.解压sqoop ,并配置环境变量 ~/.bash_pro ...

  10. 1.Introduction 介绍

    Welcome to Log4j 2! Introduction Almost every large application includes its own logging or tracing ...