效果图如下

 <!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. IIC协议建模——读写EEPROM

    案例采用明德扬设计思想完成.IIC协议是非常常用的接口协议,在电子类岗位招聘要求中经常出现它的身影.关于IIC协议这里只做简要介绍,详细信息请自行百度或查阅相关Datasheet,网上资料非常多.该篇 ...

  2. 07-从零玩转JavaWeb-对象内存分析

    上篇看了关于数组的内存分析,接下来看一下对象的内存分析 假定有如下类:  第一步会把Person的字节码放到方法区   执行main方法,把main方法的栈帧放到栈当中   Person zly = ...

  3. Maven 设置Maven源/镜像

    在Eclipse/ InteliJ Idea使用Maven时,企业提供的本地仓库经常有些Jar包下载不下来,所以.配置Maven设置国内镜像对开发人员来说是必不可少的.今天写一篇自己配制的Maven镜 ...

  4. HTML＋CSS学习任务清单

    HTML部分:掌握HTML的全部语法,他的主体结构,超连接及常用标记的使用 CSS部分:掌握CSS的三种选择器的使用,明白如何使用DIV+CSS进行网页布局,搞清楚浮动问题! 1,HTML的语法(包括 ...

  5. SSH框架整合--applicationContext.xml文件配置实例

    <?xml version="1.0" encoding="UTF-8"?><beans xmlns="http://www.spr ...

  6. <template> 标签

    <template> 元素,用于描述一个标准的以 DOM 为基础的方案来实现客户端模板.该模板允许你定义一段可以被转为 HTML 的标记,在页面加载时不生效,但可以在后续进行动态实例化.( ...

  7. 二:Redis快速入门及应用

    Redis的使用难吗?不难,Redis用好容易吗?不容易.Redis的使用虽然不难,但与业务结合的应用场景特别多.特别紧,用好并不容易.我们希望通过一篇文章及Demo,即可轻松.快速入门并学会应用. ...

  8. maven项目导出依赖的Jar包以及项目本身以jar包形式导出详细教程

    一.maven项目已jar包形式导出 1.首先右键项目,选择Export 2.选择好项目,设置导出路径和jar名字即可: 二.导出maven项目所依赖的所有jar包 1.右键项目,选择Export 2 ...

  9. 新一代的昆明网络seo优化技巧

    一年一度的双11又即将到来,今天选择在双11这天新注册了一个博客园,第一篇文章,我决定来谈一谈现在的网络SEO. 起首咱们来熟悉下SEO是什么,SEO全名叫Search Engine Optimiza ...

  10. UNIX标准及实现

    UNIX标准及实现 引言     在UNIX编程环境和C程序设计语言的标准化方面已经做了很多工作.虽然UNIX应用程序在不同的UNIX操作系统版本之间进行移植相当容易,但是20世纪80年代UNIX版本 ...