<!doctype html>

 <html>

     <head>

         <title>canvas</title>

     </head>

     <body>

         <canvas id = "clock" width = "500px" height = "500px">

             您的浏览器已过时，请更新！

         </canvas>

         <script type = "text/javascript">

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

             var cxt = clock.getContext("2d");

             function drawClock(x) {

                 var y = x / 2;

                 var r = (x - 100) / 2;

                 var x1 = r - 10;

                 var x2 = r - 20;

                 var x3 = r - 30;

                 var x4 = r - 40;

                 var x5 = r - 50;

                 //清除画布

                 cxt.clearRect(0, 0, x, x);

                 var now = new Date;

                 var sec = now.getSeconds();

                 var min = now.getMinutes();

                 var hour = now.getHours();

                 //解决时针的问题：1、小时之间  2、19:59:30s

                 hour += min / 60;

                 hour = hour > 12 ? hour - 12 : hour;

                 //表盘

                 cxt.lineWidth = 10;

                 cxt.strokeStyle = "blue";

                 cxt.beginPath();

                 cxt.arc(y, y, r, 0, 360, false);

                 cxt.closePath();

                 cxt.stroke();

                 //时刻度

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

                     cxt.save();

                     cxt.lineWidth = 7;

                     cxt.strokeStyle = "#000";

                     cxt.translate(y, y);

                     cxt.rotate(i*30 * Math.PI / 180);

                     cxt.beginPath();

                     cxt.moveTo(0, -x1);

                     cxt.lineTo(0, -x3);

                     cxt.closePath();

                     cxt.stroke();

                     cxt.restore();

                 }

                 //分刻度

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

                     cxt.save();

                     cxt.lineWidth = 5;

                     cxt.strokeStyle = "#000";

                     cxt.translate(y, y);

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

                     cxt.beginPath();

                     cxt.moveTo(0, -x1);

                     cxt.lineTo(0, -x2);

                     cxt.closePath();

                     cxt.stroke();

                     cxt.restore();

                 }

                 //时针

                 cxt.save();

                 cxt.lineWidth = 7;

                 cxt.strokeStyle = "#000";

                 cxt.translate(y, y);

                 cxt.rotate(hour * 30 * Math.PI / 180);

                 cxt.beginPath();

                 cxt.moveTo(0, -x5);

                 cxt.lineTo(0, 10);

                 cxt.closePath();

                 cxt.stroke();

                 cxt.restore();

                 //分针

                 cxt.save();

                 cxt.lineWidth = 5;

                 cxt.strokeStyle = "#000";

                 cxt.translate(y, y);

                 cxt.rotate(min * 6 * Math.PI / 180);

                 cxt.beginPath();

                 cxt.moveTo(0, -x4);

                 cxt.lineTo(0, 15);

                 cxt.closePath();

                 cxt.stroke();

                 cxt.restore();

                 //秒针

                 cxt.save();

                 cxt.lineWidth = 3;

                 cxt.strokeStyle = "red";

                 cxt.translate(y, y);

                 cxt.rotate(sec * 6 * Math.PI / 180);

                 cxt.beginPath();

                 cxt.moveTo(0, -x3);

                 cxt.lineTo(0, 20);

                 cxt.closePath();

                 cxt.stroke();

                 cxt.lineWidth = 3;

                 cxt.strokeStyle = "red";

                 cxt.beginPath();

                 cxt.arc(0, 0, 5, 0, 360, false);

                 cxt.fillStyle = "gray";

                 cxt.fill();

                 cxt.closePath();

                 cxt.stroke();

                 cxt.lineWidth = 3;

                 cxt.strokeStyle = "red";

                 cxt.fillStyle = "red";

                 cxt.beginPath();

                 cxt.arc(0, -x5, 5, 0, 360, false);

                 cxt.fill();

                 cxt.closePath();

                 cxt.stroke();

                 cxt.restore();

             }

             //行走

             drawClock(500);

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

         </script>

     </body>

 </html>

html5 canvas js(时钟)的更多相关文章

  1. [ZZ+CH] Html5 canvas+js 时钟

    总之新Blog入驻以后,又开始老习惯,到处折腾自定义的空间,放些东西. 想起以前大一的时候做过一个Javascript的时间显示器,现在想做一个时钟,当然现在老奸巨猾,会先去看一看有前辈写过没. 前辈 ...

  2. HTML5 Canvas爱心时钟代码

    这是一款数字时钟动画,数字又多个小爱心组成,又何问起整理,随着时间推进,每一秒钟新数字替换旧数字,旧数字离去使用天女散花动画,花是五颜六色的. 查看效果:http://hovertree.com/te ...

  3. html5 canvas+js实现ps钢笔抠图

    html5 canvas+js实现ps钢笔抠图 1. 项目要求需要用js实现photoshop中钢笔抠图功能,就用了近三四天的时间去解决它,最终还是基本上把他实现了. 做的过程中走了不少弯路,最终一同 ...

  4. html5 canvas+js实现ps钢笔抠图（速抠图 www.sukoutu.com）

    html5 canvas+js实现ps钢笔抠图(速抠图 www.sukoutu.com)   根据html5 canvas+js实现ps钢笔抠图的实现,aiaito 开发者开发了一套在线抠图工具,速抠 ...

  5. html5 canvas绘画时钟

    本示例使用HTML5 canvas,模拟显示了一个时钟, 请使用支持HTML5的浏览器预览效果: HTML部分: <!DOCTYPE html> <html lang="e ...

  6. html5 canvas js(数字时钟)

      <!doctype html> <html> <head> <title>canvas dClock</title> </head ...

  7. HTML5 Canvas 绘制时钟

    网上会看到很多绘制的时钟,看代码也是云里雾里,自学了下Canvas,觉得不难,就自己做了一个. 先看一下截图: 比较简陋,但是该有的都有了,样式只加了个阴影. html代码就不贴了,就一个canvas ...

  8. html5 Canvas绘制时钟以及绘制运动的圆

    1.绘制时钟 <!-- js代码 --> <script type="text/javascript"> window.onload=function(){ ...

  9. HTML5 canvas 指针时钟

    <!doctype html> <html> <head></head> <body> <canvas id="> 您 ...

随机推荐

  1. Python_selenium中类函数模块的简单介绍

    Python_selenium中类函数模块的简单介绍 一.demo1.py的代码如下所示 #coding:utf-8 class ClassA(object): string = "这是一个 ...

  2. Linux下RPM包管理

    概述 一种用于互联网下载包的打包及安装工具,它包含在某些linux分发版中.它生成具有.RPM扩展名的文件.RPM是Redhat Package Manager(Redhat软件包管理工具)的缩写.这 ...

  3. Delphi 中窗口文件与无窗口Pas文件的区别 (MTM)

    implementation {$R *.dfm}  ---- 带窗口的 dfm -- 一般的 windows 窗口 {$R *.fmx}  ---- 带窗口的 fmx -- 一般的 FireMonk ...

  4. java.lang.IllegalArgumentException: Failed to decrypt.

    加密失败. 附加信息: org.springframework.transaction.CannotCreateTransactionException: Could not open JDBC Co ...

  5. Caused by: java.lang.IllegalArgumentException: @EnableAsync annotation metadata was not injected

    需要注意的是ComponentScan 不能扫描 org.springframework 否则会报错,要扫描指定的package才行

  6. Spring Data JPA 一：环境搭建

    搭建开发环境是最麻烦的事情,各种冲突各种异常,记一下搭建过程,仅供大家参考: 用的gradle搭建的项目,先亮一下项目的大概目录: 注意一定要是这个 web工程用spring/src/main/web ...

  7. cocos2d游戏开发，常用工具集合

    位图字体工具Bitmap Font ToolsBMFont (Windows)FonteditorGlyph DesignerHieroLabelAtlasCreator 粒子编辑工具Particle ...

  8. druid

    实时分析型数据库 Druid | Interactive Analytics at Scale http://druid.io/ Druid is primarily used to store, q ...

  9. 国内java,oa,weixin opensource framework www.jeecg.org

    Soap/rest 为API生,为框架死,为Debug奋斗一辈子!吃符号的亏,上大小写的当,最后死在需求上!

  10. Java基础 - 可变字符串 StringBuffer

    StringBuffer 类是线程安全的可变字符序列,一个类似于String类的字符串缓冲区,两者本质上是一样的,但StringBuffer类的执行效率要比String类快很多.String类创建的字 ...